Vue似乎在更新隐藏表单输入中的值之前提交表单

我有一个Vue应用程序的动态形式,有两个按钮,我需要在请求中发送其中一个被点击。我是通过更新一个隐藏输入字段的值,然后用jQuery提交表单来实现的。出于某种原因,虽然我第一次点击按钮,将隐藏的输入设置为 true 它发出 false

下面是我在没有实际jQuery请求的情况下所做工作的一个小片段。我可以看到值被正确更新,所以我不确定它是否是一个竞赛条件,或者我是否遗漏了一些明显的东西。

<form id="myVueForm">
  <input type="hidden" name="submitEdit" :value="submitEdit">
  <button type="button" @click="submitEdit = true">Submit Edit</button>
  <button type="button" @click="submitEdit = false">Submit without Edit</button>
</form>

var myApp = new Vue({
  el: '#myVueForm',
  data: function() {
    return {
      submitEdit: false
    }
  },
  watch: {
    'submitEdit': function(value) {
      console.log(this.submitEdit, "submitEdit value");
      console.log('Submitting form!');
    }
  }
})

https://codepen.io/anon/pen/jvGXLG?editors=1111