Переменная изменена в родительском, но не изменена в дочернем VueJs

Question

Я пытаюсь изменить логическую переменную isSubmited после того, как из родительского компонента сделан запрос на публикацию, и это вызовет наблюдение от дочернего элемента, и будет другой запрос на публикацию, использующий форму ответа первого ответа.

Поток начинается с родительского компонента.

1. Пользователь нажимает на кнопку отправки.
2. . В родительском агенте я создаю новый контракт и получаю идентификатор из ответа (после отправки запроса)
3. После отправки запроса, Я изменяю логическое значение, чтобы активировать часы от дочернего элемента.
4. В дочернем компоненте я сделаю еще один пост, который использует идентификационную форму родительского ответа

В основном 2 почтовых запроса, сначала в родительский и второй дочерний, который использует идентификатор от родителя.

от родительского компонента

 <upload-file-test :id_contract="id_contract" :isSubmited="isSubmited" ></upload-file-test>

     addContract(data) {
           this.isSubmited = !this.isSubmited;  //from here in child component watch it works

           post("/url", data)
               .then((response) => {
                   this.id_contract = response.data;
                   this.isSubmited = !this.isSubmited;  //from here in child component is not changed
                }
    }

от дочернего компонента

props: ['id_contract', 'isSubmited']

 watch:{
        isSubmited: {
            handler(){
                console.log('Submited');
                //here will be a method for post request
            }
        },
  }

Answer 1

Как вы можете видеть в приведенном ниже примере, тот факт, что изменение переменной в обещании корректно вызывает наблюдателя.

Я думаю, что ваше сообщение проваливается и, следовательно, фактически не меняется isSubmited.

Вы должны поймать ошибку.

post("/url", data).then(response => {
  this.id_contract = response.data;
  this.isSubmited = !this.isSubmited;
}).catch(error => {
  console.log("post is failing")
});

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    bool: false
  },
  methods: {
    test() {
      this.bool = !this.bool;
      fetch("https://jsonplaceholder.typicode.com/todos/1").then(() => {
        this.bool = !this.bool;
      });
    }
  },
  watch: {
    bool: {
      handler() {
        console.log("CHANGE");
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="test">test</button>
</div>