Vue2 and jquery-ui datepicker :: minDate not updating dynamically

Question

I am trying to update the mindate on a jquery-ui datepicker based on the selection of a dropdown.

I am adding the datepicker when the component is mounted and those options work fine.

I am trying to update the minDate when the input is clicked with a Vuejs click event.

I know that using Vue and Jquery together isn't ideal, but I am not allowed to use the CLI on this project and therefore can't use any of the other Vue datepickers.

What am I doing wrong?

<script type="text/x-template" id="modal-template">
    <div class="modal">
        <input class="datepicker"
               v-model="statusDate"
               v-on:click="updateDatePickerMinDate()" />
        <select v-model="statusTypeEnum">
            <option value="1">Status 1</option>
            <option value="2">Status 2</option>
        </select>
    </div>
</script>

Vue.component('date-picker-modal', {
  template: "#modal-template",
  props:["statusDate","statusTypeEnum"],
  methods: {
    updateDatePickerMinDate: function(){
        var self = this;
        var minDate = "-90d";

        if (self.$root.statusTypeEnum === "2") {
            minDate = "-180d";
        }
        $(self.$el).find(".datepicker").datepicker("options", {
            minDate: minDate
        });
    }
  },
  mounted: function() {
    var self = this;
    $(self.$el).find(".datepicker").datepicker({
        onSelect: function (selectedDate, datePicker) {
                    self.$root.startDate = selectedDate;
        },
        maxDate: "+0d"
    });
  },
  beforeDestroy: function() {
    var self = this;
    $(self.$el).find(".datepicker").datepicker('hide').datepicker('destroy');
  }
});