vue.jsでv-on:changeが発火しない

Question

以下のようなinputタグでchangeイベントを発火させたいのですが、
外部jsからinputのvalueを変更するとchangeイベントが発火しません。
どうすればいいでしょうか？

数値<input class="value" type="number" min="1" max="10000" step="1" required="required" name="target" v-model="hoge" @change="onChange" />

<!-- inputを設定できるスライドバー -->
<div class="input-slider-bar"></div>

上記のinputを直接入力で変更した場合、changeイベントは問題なく発火します。
しかし、下にある「inputを設定できるスライドバー」を使用してinput内の数値を変更するとchangeイベントが発火してくれません。
このスライドバーは外部jsを用いてjsで設置される仕組みになっており、
このhtmlは直接vueに記載されているわけではないです。

このバーを使用してinput内の数値を変更すると、DOM上はきちんと入力内容が変更されるのですが、
changeが発火してくれないです。

数値「200」
----●--------- ←バーです
これを直接300に変えるとchangeイベントが発火する

数値「200」
-------●----- ←バーです
このバーを動かすと見た目は、
数値「300」
というように変更されるがchangeイベントが発火しない

どうにかしてchangeイベントを発火させたいのですがなにかいい方法はございますでしょうか？

アドバイスいただけますと幸いです。
よろしくお願いいたします。

Comments

[shiketa]

\# k4aさんの書かれていることが真っ当だとおもいますが。
やったことありませんが、直接値を変更するのではなく、pasteしてみるとか。 https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

Answer 1

外部JSが制御している時点でVueの管理下に置くことは不可能です。

通常のJS記法にてイベント監視をして下さい。

const element= document.querySelector(hoge);

element.addEventListener('change', (event) => {
 // 処理
});

Comments

[weak_man]

ありがとうございます。その方法にて対処します。