LaravelのBladeに組み込んだVueコンポーネントのscriptが実行されない。

Question

home.blade.phpに組み込んだ、Vueコンポーネントのscriptが実行されません。

{{-- home.blade.php --}}
@extends('layouts.app')
@section('content')
<test-component></test-component>
@endsection

<!-- TestComponents.vue-->

<template>
  <div class="row justify-content-center">
    <div id="app">@{{ message }}</div>
  </div>
  <div class="row justify-content-center">
   <h2>表示テスト</h2>
  </div>
</template>
 
<script>
var app = new Vue({
  el: "#app",
  data: {
    message: "TEST",
  },
});
</script>

home.blade.php内にTestComponents.vueコンポーネントを読み込むように
<test-component></test-component>　と記載。

TestComponents.vueの<div id="app">@{{ message }}</div>の箇所に　new Vue（{}）で作成したdataが出力されて、home.blade.php内に表示されると思うのですが、表示結果は下記画像のように

<div id="app">@{{ message }}</div>　に<script></script>で記載した内容が出力されません。

どこを間違えているのでしょうか？
アドバイスお願いします。

Answer 1

単一コンポーネント化した場合は　new Vueでは無く、export defaultでした。

<script>
    export default {
      data() {
        return {
          message: 'TEST',
        }
      },
   }

</script>

とすることで、思い通りの実装ができました。
これに気づかずいろんなサイトをかいつまんではまってしまいました。

単一コンポーネント化した場合は　、export default
そのとき実行したい場合　new Vue

理解して使い分けていきます。