Laravel Vue3 での星評価コンポーネントの表示

Laravelのレビューページを作成していて、星評価の部分をVue.jsのvue-star-ratingで実装したいです。
https://github.com/craigh411/vue-star-rating

初めてVueを触ったのでどこが違うのか検討がつきません。
コンポーネントファイルを作ってそこにコードを移したり、順番を変えてみましたが、
どれだけコードをいじっても星の表示ができません。
JSのコードを変えるたびにnpm run dev　をしています。

コンポーネントファイルを作り、テンプレートを作成してそれをBladeで呼び出せたのでVueが使えることは確認できました。

関連するコードです。

resources/js/app.js

JavaScriot
1import StarRating from 'vue-star-rating';
2
3Vue.component('star-rating', StarRating);
4
5
6const app = Vue.createApp({
7    methods: {
8      setRating(rating){
9        this.rating= rating;
10      }
11    },
12    data: {
13      rating: 0
14    }
15  })
16  app.component('star-rating', VueStarRating.default)
17  app.mount('#app')

welcome.blade.php

PHP
1            <div id="app">
2                <h1>Vue Star Rating for Vue 3.x</h1>
3                              
4                <star-rating @update:rating ="setRating"></star-rating>
5                <star-rating v-model:rating="rating"></star-rating>
6            
7                <h2>Default</h2>
8                <star-rating></star-rating>
9              
10                <h2>Half Stars</h2>
11                <star-rating :increment="0.5"></star-rating>
12              
13                <h2>Red Stars</h2>
14                <star-rating active-color="#9c0000"></star-rating>
15            </div>
16<script src="js/app.js"></script>
17
18    </body>

webpack.mix.js

JavaScript
1const mix = require('laravel-mix');
2
3
4if (mix.inProduction()) {
5    mix.version();
6}
7
8
9mix.js('resources/js/app.js', 'public/js')
10   .sass('resources/sass/app.scss', 'public/css')
11   .vue();

package.json

json
1{
2    "private": true,
3    "scripts": {
4        "dev": "npm run development",
5        "development": "mix",
6        "watch": "mix watch",
7        "watch-poll": "mix watch -- --watch-options-poll=1000",
8        "hot": "mix watch --hot",
9        "prod": "npm run production",
10        "production": "mix --production"
11    },
12    "devDependencies": {
13        "@tailwindcss/forms": "^0.2.1",
14        "@tailwindcss/typography": "^0.3.0",
15        "@vue/compiler-sfc": "^3.0.11",
16        "alpinejs": "^2.7.3",
17        "axios": "^0.21",
18        "laravel-mix": "^6.0.6",
19        "lodash": "^4.17.19",
20        "postcss": "^8.1.14",
21        "postcss-import": "^12.0.1",
22        "resolve-url-loader": "^3.1.3",
23        "sass": "^1.34.0",
24        "sass-loader": "^10.2.0",
25        "tailwindcss": "^2.0.1",
26        "vue": "^3.0.11",
27        "vue-loader": "^16.2.0"
28    },
29    "dependencies": {
30        "vue-star-rating": "^2.1.0"
31    }
32}
33