自定义组件v-model的用法

使用自定义组件v-model时，碰到这个报错：
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated

搞了半天终于明白怎么用了，郁闷！以下才是正确的：

Mycomponent.vue

<template>
  <el-autocomplete
    v-model="msgOutput"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect"
    @change="handleSelect"
  ></el-autocomplete>
</template>

<script>
export default {
  name: 'Mycomponent',
  model: {
    prop: 'msg',
    event: 'handleSelect'
  },
  props: {
    msg: String
  },
  data() {
    return {
      msgOutput: ''
    }
  },
  created() {
    this.msgOutput = this.msg
  },
  methods: {
    querySearch(queryString, cb) {
      cb([
        { value: '三全鲜食（北新泾店）' },
        { value: 'Hot honey 首尔炸鸡（仙霞路）' },
        { value: '新旺角茶餐厅' }
      ])
    },

    handleSelect() {
      this.$emit('handleSelect', this.msgOutput)
    }
  }
}
</script>

index.html

<Mycomponent v-model="msg"></Mycomponent>