Как из директивы вызвать метод инстанса?

Question

[Игорь Че]

Как из директивы вызвать метод инстанса, не обращаясь к нему по имени (app_ctrl.updateVal())? Через this нельзя, потому что this указывает на input.
Я хочу привязать эту директиву к разным инстансам, не хочется дублировать.
Вот урезанный код:

Vue.directive('picker', {
        inserted: function (el, binding) {
            $.mask.definitions['H']='[0-9]';
            $(el).mask("HH:HH", {
                completed: function(){
                    // Метод который хочу вызвать
                    this.updateVal(binding.value['i'], binding.value['day'], this.val())
                }
            });
        }
    });

app_ctrl = new Vue({
        delimiters: ['{*', '*}'],
        el: '#controlapp',
        data: {
            data: [],
            obj_name: '',
        },

        methods:{
             // Метод который хочу вызвать
             updateVal : function (i, day, time) {
                console.log(i, day, time);
                this.data[i][day] = time;
            },
        }
    });

<table>
<tbody v-cloak>
<tr v-for="(row, i) in data" class="row body">
<td v-bind:disabled="!row.mon_from">
    <input type="text" v-model="row.mon_from" v-picker="{i: i, day: 'mon_from'}">
</td>
</tr>
</tbody>
</table>

Comments

[Антон Антон]

переделать на компонент, слоты и воспользоваться $emit не вариант? зачем именно директивой это делать? что я сейчас вижу - очень переусложнено.

[Игорь Че]

Антон Антон: Погуглю в эту сторону. А в чем переусложнение?
Собственно заморочка вся из-за того, что input вводится через js. Если из инпута убрать js фильтр, то data обновляется через v-model. Но из-за того что в инпуте js фильтр, приходится извращаться и вручную методом updateVal() заносить данные в data.
Буду рад узнать о более правильном подходе.

[Антон Антон]

Игорь Че: я не очень понимаю, что требуется, но пример поля ввода с фильтром по маске есть тут: https://ru.vuejs.org/v2/guide/components.html#%D0%...

[Игорь Че]

Антон Антон: Спасибо большое. Думаю это то что нужно.

[Игорь Че]

Антон Антон: еще раз спасибо за подсказку. Сделал как в примере.

Vue.component('time-input', {
      template: `
          <input
            ref="input"
            type="text"
            placeholder="00:00"
            v-bind:value="value"
            v-on:input="updateValue($event.target)"
          >
      `,
      props: ['value'],
      methods: {
        // Вместо того, чтобы обновлять значение напрямую,
        // в этом методе мы выполняем нормализацию и форматирование
        // введённого значения, а затем порождаем событие,
        // уведомляющее родительский компонент об изменениях
        updateValue: function (value) {
            var $vm = this;
            $(value).mask("Hh:Mm", {
                'translation': {
                    H: {pattern: /[0-2]/},
                    h: {pattern: /[0-9]/},
                    M: {pattern: /[0-5]/},
                    m: {pattern: /[0-9]/},
                },

                onComplete: function (val) {
                    // console.log('val changed! ', val);
                    // Порождаем событие с обновлённым значением поля ввода
                    $vm.$emit('input', val);
                },
            });
        }
      }
    });