diff --git a/tests/demo/.eslintrc.js b/tests/demo/.eslintrc.js
index 8cc5d50..d5ea4b8 100644
--- a/tests/demo/.eslintrc.js
+++ b/tests/demo/.eslintrc.js
@@ -6,7 +6,7 @@ module.exports = {
   },
 
   'extends': [
-    'plugin:vue/essential',
+    'plugin:vue/recommended',
     '@vue/standard',
   ],
 
diff --git a/tests/demo/src/App.vue b/tests/demo/src/App.vue
index bb915b1..b9ac0e7 100644
--- a/tests/demo/src/App.vue
+++ b/tests/demo/src/App.vue
@@ -16,9 +16,9 @@ export default {
 
 <template>
   <div id="app">
-    <ChannelList/>
+    <ChannelList />
     <div class="content">
-      <router-view/>
+      <router-view />
     </div>
   </div>
 </template>
diff --git a/tests/demo/src/components/ChannelList.vue b/tests/demo/src/components/ChannelList.vue
index 14c7a75..781e80e 100644
--- a/tests/demo/src/components/ChannelList.vue
+++ b/tests/demo/src/components/ChannelList.vue
@@ -26,31 +26,45 @@ export default {
   <div class="channel-list">
     <UserCurrent />
 
-    <ApolloQuery :query="gql => gql`
+    <ApolloQuery
+      :query="gql => gql`
       query channels {
         channels {
           ...channel
         }
       }
       ${$options.fragments.channel}
-    `">
+    `"
+    >
       <template slot-scope="{ result: { data, loading } }">
-        <div v-if="loading" class="loading">Loading...</div>
-        <div v-else-if="data" class="channels">
+        <div
+          v-if="loading"
+          class="loading"
+        >
+          Loading...
+        </div>
+        <div
+          v-else-if="data"
+          class="channels"
+        >
           <router-link
             v-for="channel of data.channels"
             :key="channel.id"
             :to="{ name: 'channel', params: { id: channel.id } }"
             class="channel"
           >
-            <div class="id">#{{ channel.id }}</div>
-            <div class="name">{{ channel.name }}</div>
+            <div class="id">
+              #{{ channel.id }}
+            </div>
+            <div class="name">
+              {{ channel.name }}
+            </div>
           </router-link>
         </div>
       </template>
     </ApolloQuery>
 
-    <MockSendMessage/>
+    <MockSendMessage />
   </div>
 </template>
 
diff --git a/tests/demo/src/components/ChannelView.vue b/tests/demo/src/components/ChannelView.vue
index 740f0ba..d392f17 100644
--- a/tests/demo/src/components/ChannelView.vue
+++ b/tests/demo/src/components/ChannelView.vue
@@ -86,7 +86,12 @@ export default {
       @result="onResult"
     >
       <template slot-scope="{ result: { data, loading } }">
-        <div v-if="!data && loading" class="loading">Loading...</div>
+        <div
+          v-if="!data && loading"
+          class="loading"
+        >
+          Loading...
+        </div>
 
         <div v-else-if="data">
           <!-- Websockets -->
@@ -95,16 +100,23 @@ export default {
             :variables="{
               channelId: id,
             }"
-            :updateQuery="onMessageChanged"
+            :update-query="onMessageChanged"
           />
 
           <div class="wrapper">
             <div class="header">
-              <div class="id">#{{ data.channel.id }}</div>
-              <div class="name">{{ data.channel.name }}</div>
+              <div class="id">
+                #{{ data.channel.id }}
+              </div>
+              <div class="name">
+                {{ data.channel.name }}
+              </div>
             </div>
 
-            <div ref="body" class="body">
+            <div
+              ref="body"
+              class="body"
+            >
               <MessageItem
                 v-for="message in data.channel.messages"
                 :key="message.id"
diff --git a/tests/demo/src/components/MessageForm.vue b/tests/demo/src/components/MessageForm.vue
index bb82449..475ee50 100644
--- a/tests/demo/src/components/MessageForm.vue
+++ b/tests/demo/src/components/MessageForm.vue
@@ -51,9 +51,9 @@ export default {
     @done="onDone"
   >
     <input
-      slot-scope="{ mutate, loading, error }"
       ref="input"
       v-model="newMessage"
+      slot-scope="{ mutate, loading }"
       :disabled="loading"
       class="form-input"
       placeholder="Type a message"
diff --git a/tests/demo/src/components/MessageItem.vue b/tests/demo/src/components/MessageItem.vue
index 6e4c6bf..db29e3b 100644
--- a/tests/demo/src/components/MessageItem.vue
+++ b/tests/demo/src/components/MessageItem.vue
@@ -27,8 +27,13 @@ export default {
 
 <template>
   <div class="message-item">
-    <div class="user">{{ message.user.nickname }}</div>
-    <div class="content" v-html="html"/>
+    <div class="user">
+      {{ message.user.nickname }}
+    </div>
+    <div
+      class="content"
+      v-html="html"
+    />
   </div>
 </template>
 
diff --git a/tests/demo/src/components/UserCurrent.vue b/tests/demo/src/components/UserCurrent.vue
index 5754abe..8b071f4 100644
--- a/tests/demo/src/components/UserCurrent.vue
+++ b/tests/demo/src/components/UserCurrent.vue
@@ -27,8 +27,12 @@ export default {
     <template v-if="userCurrent">
       <i class="material-icons user-icon">account_circle</i>
       <div class="info">
-        <div class="nickname">{{ userCurrent.nickname }}</div>
-        <div class="email">{{ userCurrent.email }}</div>
+        <div class="nickname">
+          {{ userCurrent.nickname }}
+        </div>
+        <div class="email">
+          {{ userCurrent.email }}
+        </div>
       </div>
       <button
         class="icon-button"
diff --git a/tests/demo/src/components/UserLogin.vue b/tests/demo/src/components/UserLogin.vue
index 3dcaf24..42932d2 100644
--- a/tests/demo/src/components/UserLogin.vue
+++ b/tests/demo/src/components/UserLogin.vue
@@ -83,8 +83,8 @@ export default {
       @done="onDone"
     >
       <form
-        slot-scope="{ mutate, loading, gqlError: error }"
         :key="showRegister"
+        slot-scope="{ mutate, loading, gqlError: error }"
         class="form"
         @submit.prevent="mutate()"
       >
@@ -112,14 +112,21 @@ export default {
           placeholder="Nickname"
           required
         >
-        <div v-if="error" class="error">{{ error.message }}</div>
+        <div
+          v-if="error"
+          class="error"
+        >
+          {{ error.message }}
+        </div>
         <template v-if="!showRegister">
           <button
             type="submit"
             :disabled="loading"
             class="button"
             data-id="login"
-          >Login</button>
+          >
+            Login
+          </button>
           <div class="actions">
             <a
               data-id="create-account"
@@ -133,7 +140,9 @@ export default {
             :disabled="loading"
             class="button"
             data-id="submit-new-account"
-          >Create new account</button>
+          >
+            Create new account
+          </button>
           <div class="actions">
             <a @click="showRegister = false">Go back</a>
           </div>
diff --git a/tests/demo/src/components/WelcomeView.vue b/tests/demo/src/components/WelcomeView.vue
index e036563..bb5a77c 100644
--- a/tests/demo/src/components/WelcomeView.vue
+++ b/tests/demo/src/components/WelcomeView.vue
@@ -6,8 +6,12 @@ export default {
 
 <template>
   <div class="welcome-view">
-    <div class="title">Welcome!</div>
-    <div class="info">Select a channel to start messaging</div>
+    <div class="title">
+      Welcome!
+    </div>
+    <div class="info">
+      Select a channel to start messaging
+    </div>
   </div>
 </template>