返回父级，选择的项目数

有app：

    <div id="app">
      <form>
        <div class="form-group">
          <input type="text" class="form-control" v-model="q" @input="typeInput">
          <search-item 
            v-for="item in search" 
            :item="item" 
            :key="item.id"
            v-on:click="changeStateItem">  
           </search-item>
        </div>
        <div class="form-group row">
          <p class="form-control-static">#{ checkedItems }</p>
        </div>
      </form>
    </div>

有一个模板：

    <template id="search-item">
      <div class="form-group row" @click="clickedItem">
        <p class="form-control-static" @click="inStock =! inStock">
        <i v-show="inStock" class="fa fa-check"></i>
        Название: #{ item.title }</p>
      </div>
    </template>

任务是显示<p class="form-control-static">#{ checkedItems }</p>所选元素的数量 ( item in search)。

这是代码本身：

  Vue.component('search-item', {
    props: ['item', 'value'],
    delimiters: ["#{", "}"],
    template: '#search-item',
    data: function() {
      return {
        inStock: false,
      }
    },
    methods: {
      clickItem: function() {
        this.$emit('click')
      },  
    }
  })

  var app = new Vue({
    el: '#app',
    delimiters: ["#{", "}"],
    data: {
      endpoint: 'http://' + window.location.host + '/search/autocomplete/?q=',
      q: '',
      search: [],
      checkedItems: [],
    },
    methods: {
      onClick: function() {
        this.$http.post(this.endpoint + this.q).then(
           function(response){
            this.search = response.data
        }, function(error){
          //console.log(error)
        })
      },
      changeStateItem: function() {
        //
      }
    },
  })

现在一切正常，除了将结果返回给父模型。在帮助下，this.$emit('click')可以点击组件，但我不知道如何传输 inStock. 我想要checkedItems: []那些被选中的组件 ( inStock == true)

我才学习 vue.js 一天半，所以不要太苛刻地判断。

对我来说，这是一种奇怪的动物。在此之前，我只与jQuery.