【VueCLI 】Watchで監視して、変化があった時にそれをフックにindex.htmlの関数を実行する

Question

実現したいこと

タイトル通りですが、
Watchで監視して、変化があった時にそれをフックにindex.htmlの関数を実行することは
可能でしょうか？

下記のように
コンポーネントに、watchを仕込ませて、
dataのstatusの値が変わったら
それをフックに
punlic/index.html 側の関数を実行したいと考えています。

alertやconsole.logは表示されるのですが・・
index.html側の関数を実行することは可能でしょうか？

該当のソースコード

export default {
 name: 'Container',

 data: () => {
  return {
    status: 0, // 1:Question, 2:Result
 },

 watch: {
	status: function(next, prev) {
	  if(next==1){
	    document.alert('nextの値が変化した')
	  }
	}
 }
}

//nextが1になったら
const hoge = () => {
 //ここの処理を実行
}

グローバル変数に投げようとしてもうまくいかず・・

詳しい方、ご教示いただけますと助かります。

何卒宜しくお願い致します。

補足

VueCLI で開発中です。
Vueは２系です。

Answer 1

解決案

index.html側の処理をVueコンポーネント内からでも参照できるwindowオブジェクトか何かに格納しておいて、それを必要に応じて呼び出す。

export default {
 name: 'Container',

 data: () => {
  return {
    status: 0, // 1:Question, 2:Result
 },

 watch: {
    status: function(next, prev) {
      if(next==1){
        window.hoge()
        document.alert('nextの値が変化した')
      }
    }
 }
}

//nextが1になったら
window.hoge = () => {
 //ここの処理を実行
}

解説

gksh7さんが提示されている情報からの推測が多分に含まれる回答になっています。何か勘違いしていることがあればお伝えください。
まず、index.html内の関数というのは<script>内で定義されたものという理解で間違いないでしょうか。もしそうであれば、const hoge =... のような形で関数を定義しても、その外からそれを呼び出すことは不可能です。
Vueコンポーネントなどから外の関数を無理やり呼び出すこと自体避けるべきだとは思いますが、仮にその必要があるとして取れる手段の１つがwindowオブジェクトなど、コンポーネントからでも参照できるオブジェクトに必要な関数を置いておくという形になります。
多用するとwindowオブジェクトがどんどん汚染されるので最低限に控えるべきだとは思いますが、ひとまずこれで行われたいことが実現できるんじゃないかなと思います。

何か不明な点があればお伝えください。
ご確認をよろしくお願いします！

Comments

[gksh7]

marasonPDさん
ありがとうございます。

教えてくださったように、Windowオブジェクトに対して格納したら
statusが変更を検知した際に、期待通りに関数が実行されました。

ソースコードも、その上、開設もご丁寧に教えていただき感謝申し上げます。
助かりました！

＞まず、index.html内の関数というのは<script>内で定義されたものという理解で間違いないでしょうか。
＞もしそうであれば、const hoge =... のような形で関数を定義しても、その外からそれを呼び出すことは不可能です。
おっしゃる通りでしてて、const hoge =... とか、無名関数で設定して
呼び出そうとしていました。
windowオブジェクトに紐づける・・ということ大変勉強になりました。

＞多用するとwindowオブジェクトがどんどん汚染されるので最低限に控えるべきだとは思います
とのことですので、こちら最低限の使用にとどめたいと思います。

無事に先に進めそうです。本当にありがとうございました。