v-on:change event is not fired when javascript is used to increase value is Vue
<p>I am building a retirement income calculator for work and started using Vue for the first time to integrate two-way data binding. I have developed most of the functionality of the calculator, however I am having some trouble implementing a couple business rules into the calculator due to unfamiliarity with Vue. The code I have completed can be viewed at <a href="https://jsfiddle.net/9f542pqs/" rel="nofollow">https://jsfiddle.net/9f542pqs/</a>. Here are the business rules that I need to apply:</p>

<ul>
<li>A user can select their current age as a range from 35-70.</li>
<li>The minimum "contribute until" age that can be selected is 65. </li>
<li>The maximum "contribute until" age that can be selected in 85.</li>
<li>A user can contribute anywhere from  a minimum of 15 years  to a maximum of 30 years.</li>
<li>Considering the above rules, when the user selects their current age as anywhere from 35-51, the minimum age that can be selected for the "contribute until" age is 65, and the button to decrease this age should be disabled.</li>
<li>When the difference between the age a user has selected to contribute until and the age they have selected as their current age is 15 years, the button to decrease the "contribute until" age should be disabled. </li>
<li>The same applies to when the difference between the ages is 30 years, then the button to increase the "contribute until" age should be disabled.</li>
<li>When a button is to be disabled, the disabled attribute, along with a class of 'disabled' are to be applied.</li>
</ul>

<p>I have tried to attach a <code>v-on:change</code> listener to the input used to store the "contribute until" age and then do a check of the business rules to set booleans that control the disabled state of the increase/decrease buttons, but the event never fires for me. How can I implement such functionality to disable the increase/decrease buttons when the value of the "contribute until" age is updated?</p>