title: Property or method "filterQuery" is not defined on the instance but referenced during render
body: <p>My Html code part is here:</p>
  
  <pre><code>&lt;input v-model="filterQuery" placeholder="Filter rules" class="form-control"&gt;
  &lt;table v-if="filteredUsers.length"&gt;
        &lt;tbody is="transition-group" name="user-list"&gt;
           &lt;tr v-for="user in filteredUsers" :key="user.id"&gt;
              &lt;td v-for="(column,index) in tableColumns"&gt;
                 &lt;div class="rules"&gt;
                    {{ getField(user, column.field) }}
                 &lt;/div&gt;
              &lt;/td&gt;
           &lt;/tr&gt;
        &lt;/tbody&gt;
     &lt;/table&gt;
     &lt;p v-if="statusMessage" class="well"&gt;
        {{ statusMessage }}
     &lt;/p&gt;
  </code></pre>
  
  <p>And my Script part is:   </p>
  
  <pre><code>export default ({
      data: {
            tableColumns: [{
              field: 'name'
            }],
            rules: [],
            filterQuery: '',
            orderByField: 'name',
            fetchError: false
          },
      created: function () {
            this.fetchUsers()
          },
      methods: {
            fetchUsers: function () {
              var vm = this
              vm.rules = []
              vm.fetchError = false
              fetch('http://172.26.3.44:8002/orientDbRestAPI/rules').then(function (response) {
                return response.json()
              }).then(function (rules) {
                vm.rules = rules.result
              }).catch(function () {
                vm.fetchError = true
              })
            },
            getField: function (object, field) {
              return _.at(object, field)[0]
            }
      },
          computed: {
            filteredUsers: function () {
              var vm = this
              return _.orderBy(vm.rules.filter(function (user) {
                var regex = new RegExp(vm.filterQuery, 'i')
                console.log('&gt;&gt;&gt;&gt; ' + user.name + ' -- ' + vm.filterQuery)
                return (regex.test(user.name))
              }), vm.orderByField)
            },
            statusMessage: function () {
              if (this.fetchError) {
                return 'There was a problem fetching the rules. JSONPlaceholder might be down.'
              }
              if (this.rules.length) {
                if (!this.filteredUsers.length) {
                  return 'Sorry, no matching rules were found.'
                }
              }
              else {
                return 'Loading...'
              }
            }
      })
  </code></pre>
  
  <p>With the above code, the error below occurs when the button is clicked.</p>
  
  <blockquote>
    <p>vue.runtime.esm.js?a427:430 [Vue warn]: Property or method
    "filterQuery" is not defined on the instance but referenced during
    render. Make sure to declare reactive data properties in the data
    option.</p>
  </blockquote>