title: Vue data model change not reflected in bound component
body: <p>A jQuery datepicker is wrappped in a Vue component. The component emits an update message used to update the app model.</p>
  
  <p>The app has two datepicker input fields:</p>
  
  <ul>
  <li><code>startDate</code></li>
  <li><code>adjustmentDate</code></li>
  </ul>
  
  <p>When <code>startDate</code> is modified, <code>adjustmentDate</code> is to be updated to the next first or fifteenth of the month. However, the <code>adjustmentDate</code> datepicker component is not being notified of the update.</p>
  
  <p>Expected behaviour:</p>
  
  <ul>
  <li><p><code>startDate</code> datepicker <code>onSelect</code> triggers the Vue component <code>emit</code> which is captured by Vue method <code>updateStartDate</code></p></li>
  <li><p>method <code>updateStartDate</code> sets model property <code>adjustmentDate</code></p></li>
  </ul>
  
  <p>It was hoped this would trigger the <code>adjustmentDate</code> component update since the <code>adjustmentDate</code> model attribute is bound to the datepicker <code>componentDate</code> property which has a watch.</p>
  
  <p>But changing the model doesn't have the affect of notifying the component.</p>
  
  <p>Any suggestions how to do this properly and show the newly calculated <code>adjustmentDate</code> when the <code>startDate</code> is changed?</p>
  
  <p><strong>Demo code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=us-ascii"&gt;
  
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  
      &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
      &lt;div id="app"&gt;
  
          &lt;div&gt;&lt;label&gt;Start date&lt;/label&gt;&lt;/div&gt;
          &lt;div&gt;
              &lt;date-picker 
                  v-model="startDate"
                  v-bind:component-date="startDate"
                  date-format="yy-mm-dd"
                  @update-date="updateStartDate"
                  v-once
              &gt;&lt;/date-picker&gt;
          &lt;/div&gt;
  
          &lt;div&gt;&lt;label&gt;Adjustment date&lt;/label&gt;&lt;/div&gt;
          &lt;div&gt;
              &lt;date-picker
                  v-model="adjustmentDate"
                  v-bind:component-date="adjustmentDate"
                  date-format="yy-mm-dd"
                  @update-date="updateAdjustmentDate"
                  v-once
              &gt;&lt;/date-picker&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;script&gt;
  
      Vue.component('date-picker', {
  
          props: ['dateFormat', 'componentDate'],
  
          template: '&lt;input/&gt;',
  
  
          mounted: function() {
  
          var self = this;
  
          var _convertDateStringToDate = function(dateString) {
                  var dateParts = dateString.split("-");
                  var year = dateParts[0];
                  var month = dateParts[1];
                  var dayOfMonth = dateParts[2];
                  return new Date(year, month, dayOfMonth);
          };
  
  
          $(this.$el).datepicker({
  
                  dateFormat: this.dateFormat,
  
                  onSelect: function(date) {
                          self.$emit('update-date', _convertDateStringToDate(date));
                  },
  
                  onClose: function(date) {
                          self.$emit('update-date', _convertDateStringToDate(date));
                  }
  
          });
  
          $(this.$el).datepicker('setDate', this.componentDate);
  
          },
  
  
          watch: {
              componentDate: function(newValue, oldValue) {
                  $(this.$el).datepicker('setDate', this.componentDate);
              }
          },
  
  
          beforeDestroy: function() {
              $(this.$el).datepicker('hide').datepicker('destroy');
          }
  
      });
  
  
  
      var _calculateAdjustmentDate = function(date) {
  
          var year = date.getFullYear();
          var month = date.getMonth();
          var dayOfMonth = date.getDate();
  
          if (dayOfMonth &gt; 15) {
              month = month + 1;
              dayOfMonth = 1;
          } else if (dayOfMonth &gt; 1 &amp;&amp; dayOfMonth &lt; 15) {
              dayOfMonth = 15;
          }
  
          return new Date(year, month, dayOfMonth);
  
      };
  
  
      var data = function() {
  
          var now = new Date();
  
          return {
                  startDate: now,
                  adjustmentDate: _calculateAdjustmentDate(now),
          };
  
      };
  
  
      new Vue({
  
          el: '#app',
  
          data: data,
  
          methods: {
  
                  updateStartDate: function(date) {
                          this.startDate = date;
                          this.adjustmentDate = _calculateAdjustmentDate(date);
                  },
  
                  updateAdjustmentDate: function(date) {
                          this.adjustmentDate = date;
                  },
  
          }
  
      });
  
  
      &lt;/script&gt;
  
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>