Vue 组件部分工作并且没有出现在 Vue 检查器中

Question

我有一个非常简单的 vue 组件

<template>
  <div class="field has-addons">
      <div class="control is-expanded">
          <div class="select is-fullwidth">
              <select v-model="selected" @change="onChange($event)">
                  <option disabled value="">Select a list for Sync</option>
                  <option v-for="option in selectOptions" :value="option.id">{{option.name}}</option>
              </select>
          </div>
      </div>
      <div class="control">
          <a :href="syncUrl">
              <div class="button is-success">Sync</div>
          </a>
      </div>
  </div>
</template>
<style scoped>

</style>

<script>

  export default {
    props: {
      lists: String,
      training_id: String
    },

    mounted: function() {
      console.log('mounted');
    },

    computed: {
      syncUrl: function () {
        return "/admin/trainings/" + this.training_id + "/sync_list_to_training/" + this.selected
      }
    },

    data: function(){
      return {
        selectedList: '',
        selectOptions: '',
        selected: ''
      }
    },
    beforeMount() {
      this.selectOptions = JSON.parse(this.lists)
      this.inputName = this.name
    },

    methods: {
      onChange(event) {
            console.log(event.target.value)
        }
    }
  }
</script>

它有效，我可以显示带有我的选项和值的选择。 顺便说一句，组件没有出现在 Vue Inspector 中，没有道具或数据检查。 并且选择不起作用。 我已经在我的日志中“安装”了，选择中填充了来自道具的正确数据。但是当我看到一个选项时，不会触发更改事件。 为什么？该组件正在工作和不工作，我找不到解决方案。

编辑：即使我将组件更改为“vue 示例”

<template>
  <div class="field has-addons">
      <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <span>Selected: {{ selected }}</span>
  </div>
</template>
<style scoped>

</style>

<script>
export default {
  data: function(){
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}
</script>

它不起作用，我在检查器中看不到它... 这是调用

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks';
Vue.use(TurbolinksAdapter)

import ActiveCampaign from '../../../application/components/active_campaign/ActiveCampaign.vue'

document.addEventListener('turbolinks:load', () => {
  const vueApp = new Vue({
    el: '#app-container',
    components: {
      'active_campaign': ActiveCampaign,
    },
  })
})

控制台没有错误：vue-devtools Detected Vue v2.6.10

Answer 1

UPD：

你可以试试这个吗？

另一个技巧是等待下一个滴答声：

<input type="checkbox" v-model="myModel" @change="myFunction()">

...

myFunction: function() {
    var context = this;
    Vue.nextTick(function () {
        alert(context.myModel);
    }
}

这里是https://github.com/vuejs/vue/issues/293#issuecomment-265716984