Why doesn't a computed property fire after validation?

Question

Vue.js

I'm trying to implement an observer through a computed property. The title field is dynamically assigned the success class only after a successful Jquery Validation. And this 'success' should appear in the button title, but it doesn't appear and the button stays false. Why? How to fix? I found only solutions through some kind of user action, such as entering letters in a field. But how to make the button change after changing the class of the field, regardless of the reason why this class has changed?
HTML:

<input id="title" v-bind:class="{success:ifSuccess}">
<button id="btn">{{message}}</button>

JS

var app1 = new Vue({
  el: '#product_create_form',
  data: {
    ifSuccess: false
  },
  computed: {
    message:  function () {
      return this.ifSuccess
    }
  }
})

Answer 1

A counter question - where did you get the idea that the property should change its value? It shouldn't, it v-bindworks in one direction, from the fact that some third-party code adds a class to the element, the ifSuccess property will not change its value.
If you want to monitor the presence of a class, use MutationObserver . Or, perhaps, the plugin you are using generates some validation-related events - then you can switch the value of the property in the corresponding handler. Or, you can hang an event handler on the element that causes validation (input, probably), and check for the presence of a class and switch the property there.
Well, the most correct option is to throw out jquery to hell, and use some solution designed specifically for vue for validation.VeeValidate , for example.

Answer 2

computed is only called when its dependencies change. In this case, it's ifSuccess, but I don't see it changing in the code. Initially, using jquery validation + vue is a bad form.