Vue router-view isn’t displaying all views

Sorry for the heavy text. All of my router-views work, except for one, which shows blank. I do not see any console errors of warnings and the format is identical between views – the only difference is the template. This was working, but I started a new project because my package.json and dependencies got messy. I’ve read through the code ad nauseum and I just can’t work out why it wont show. The code is condensed as there’s lots. If you prefer, here’s a link to a sandbox: https://codesandbox.io/s/condescending-monad-5o8qw

    <template>
  <div class="review-movie-detail">
    <div class="movie-image">
    <img :src="(`https://image.tmdb.org/t/p/original/${movie.poster_path}`)" alt="Movie Poster" />
    </div>

    <table class="movie-rating-details">
    <tr> <h2>{{movie.original_title}}</h2> </tr>
    <p> </p>
    <tr>Gore rating: <span class="emojiRatings" >{{getGoreEmoji()}} </span></tr>
    <tr><input v-model = "goreRating" type="range" min="1" max="100" class="slider" id="myRange"></tr>

    <tr> <div class="star-rating"> <star-rating v-model="rating"> </star-rating></div></tr>
    <tr><b-button class="block-button">Submit review</b-button></tr>
    </table>
  </div>
</template>

<script>
import { ref, onBeforeMount } from 'vue';
import env from '@/env.js'
import { useRoute } from 'vue-router';
import StarRating from 'vue-star-rating'

    
    
    export default {
      components : {StarRating},
      setup () {
        const movie = ref({});
        const route = useRoute();
        onBeforeMount(() => {
          fetch(`https://api.themoviedb.org/3/movie/${route.params.id}?api_key=${env.apikey}`)
    
            .then(response => response.json())
            .then(data => {
              movie.value = data;
            });
        });
        return {
          movie
        }
      },
      data() {
         return {
           goreRating: '50',
           shockRating : '50',
           jumpRating: '50',
           plotRating: '50',
           supernaturalRating: '50',
           rating: '3.5'
          }
        
      },
      methods: {
    getGoreEmoji() {
    let emojiRating = ["🩸", "🩸🩸", "🩸🩸🩸", "🩸🩸🩸🩸", "🩸🩸🩸🩸🩸", "🩸🩸🩸🩸🩸🩸"]
    return emojiRating[(Math.floor(this.goreRating/20))]
},

}
}

and here is my router:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import MovieDetail from '../views/MovieDetail.vue'
import ReviewMovie from '../views/ReviewMovie.vue'



const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/movie/:id',
    name: 'Movie Detail',
    component: MovieDetail
  },
  {
    path: '/movie/:id/review',
    name: 'Review Movie',
    component: ReviewMovie
  }
]


const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

and app.Vue to display the router view…

<template>
<div>
<header>
  <GoBack />

  <router-link to="/">
  <h1><span>Horror</span>Hub</h1> 
  </router-link>
</header>
<main>
  <router-view></router-view>
</main>
</div>
</template>
<script>
import GoBack from "@/./components/GoBack"
export default {
  components: {
    GoBack
  }
  
}
</script>

How can I find the root cause of this issue (pun intended)?

Answer

As you are using Vue 3, you need to use vue-star-rating@next

npm install vue-star-rating@next
or
yarn add vue-star-rating@next

in package.json, it should be

"vue-star-rating": "^2.1.0"

and use the new new syntax as well

<star-rating v-model:rating="rating"></star-rating>

Here is the working codesandbox:

https://codesandbox.io/s/little-sea-xccm4?file=/src/views/ReviewMovie.vue