laravelとvueの連携について

Question

前提・実現したいこと

laravelベースのwebアプリを作っているのですが、動的に入力値を増やせるようにform部分をvue.jsで作成しようと思っています。
###問題点
そのためにまずvueをblade上で使おうと思ったのですが、いくつかうまくいかないことがあります。一つはv-onやv-bindを使った変数の操作が出来ない事で、もう一つはmethodsのaddが動いてくれません。numの0は正常に表示されます。

該当のソースコード

//略
    <script src="{{ asset('js/dist/test.js') }}"></script>
    <div id="app">
        <p>@{{ num }}</p>
        <button v-on:click="add">add button</button>
    </div>
//略

   import Vue from 'vue';
   new Vue({
       el: '#app',
       data() {
           return {
               num:0,
           }
       },
       methods: {
          add(){
               this.num++;
           }
       }
   });

現状

larave、vue間での値の受け渡しがblade上で出来るため楽だと思い、test.jsを別でコンパイルし読み込んでいます。
laravelとvueの経験が浅いため連携の方法がこれでいいのかも不安があります。
axiosを利用した方法でデータのやり取りができることは調べているときに分かったのですが、わざわざapiを通す利点がわかりません...

初投稿であるため質問自体に不備もあると思いますが、どうか詳しい方よろしくお願いします。

Answer 1

解決しているかもしれないですが、Laravel側にvueコンポーネントを埋め込めば動作します。

Btn.vue

<template>
  <div>
    <p>@{{ num }}</p>
    <button v-on:click="add">add button</button>
  </div>
</template>

<script>
  export default {
    data() {
           return {
               num:0,
           }
       },
       methods: {
          add(){
               this.num++;
           }
       }
  }
</script>

app.js

Vue.component('btn', require('./components/Btn.vue'));

※パスはローカルに合わせてください

blade

<div id="app">
  <btn></btn>
</div>

Answer 2

テンプレのような間違った使い方。
LaravelでVue使うなら必ずVueコンポーネントを使う。

一人で考えた良し悪しよりもフレームワークが用意してる普通の使い方のほうが正しい。

Comments

[yamamoto_1121]

回答ありがとうございます。
お二方が答えてくれた通りにコンポーネントを使った実装をやってみようと思います。