Vue开发Dropdown组件报Method "watch" has type "object"错误如何解决

错误核心原因是watch配置项的层级放置错误：
Vue组件的配置规则中，watch是和methods、data平级的顶级配置字段，methods内部只允许存放函数类型的方法。你将对象类型的watch配置写在了methods内部，Vue解析methods时发现存在非函数类型的字段，就会抛出该类型不匹配错误。

修复方案 #

将watch从methods中移出，放在和methods平级的顶级配置位置即可，修复后的代码结构参考如下：

export default {
  data() {
    return {
      selected: '',
      parentId: null,
      // 其他你的数据字段
    }
  },
  methods: {
    updateSelectedValue: function (newValue) {
      this.selected = newValue;
    },
    addParam() {
      this.addFormFields(['params'], {
        slug: '',
        name: '',
        isRequired: true,
        description: '',
        typeSlug: '',
      });
    },
    deleteParam(idx){
      this.removeFormFields(['params', idx]);
    },
    restoreParam(idx){
      this.restoreFormFields(['params', idx])
    },
    $newObject() {
      return  {
        slug: '',
        name: '',
        isAbstract: false,
        requester: '',
        description: '',
        status: 'inactive',
        params: [],
        selected: '',
      };
    },
    $extraPrams() {
      return {
        parentId: this.parentId,
      };
    }
  },
  // watch配置移至此处，与methods平级
  watch: {
    selected: function (val) {
      console.log("value changed", val);
    },
  }
}

修改完成后错误即可消失，selected的变更监听逻辑也能正常触发。

内容的提问来源于stack exchange，提问作者cbln