Андрей Шулепин

watch: {
  '$route.query.page'() {
    this.loadCustomers();
  },
},

watch: {
  '$route.query.page': {
    immediate: true,
    handler: 'loadCustomers',
  },
},

const api = {
  async getData() {
    return {name: 'Foo', email: 'foo@bar.com'};
  }
}

new Vue({
  el:'#app',
  template: `<div v-if="current">
    <input v-model="current.name" />
    <input v-model="current.email" />
    <button :disabled="!isChanged">submit</button>
  </div>`,
  data() {
    return {
      original: null,
      current: null,
    }
  },
  async created() {
    const data = await api.getData();
    this.original = JSON.stringify(data);
    this.current = data;
  },
  computed: {
    isChanged() {
      return JSON.stringify(this.current) !== this.original;
    }
  }
});

<input type="text" v-model="name" @input="name_changed = true">

проблема в том, что видимо когда по первому запросу поле name заполняется, соответственно поле name_changed становится равно true и кнопка сохранения получается изначально доступна

watch:{
  name(val, old){
    this.name_changed = true;
  }
}

this.$watch('name', () => this.name_changed = true);

jQuery старая библиотека, и не стоит ее учить.

При этом точно такой же блок кода, но с другим свойством, отлично срабатывает и текст меняется. Отличие в том, что это другое свойство изначально есть в этом объекте campaign, а не устанавливается в created.