Problem

I'm building a post website with a view count. I am also using firebase. I added the view count so if you click on one of the posts (playlistsin the code) it should add one view to the post.

As you can see the view count is added in the p tag inside the router-link. It is also added in the PlaylistDetails component. The problem is that it updates the view count in the p tag but not in the PlaylistDetails.

So when you click on the router-link, the p tag will update and it will bring you to the playlistdetails component, but there it won't update.

This is my code:

The View Count with Button

<template>
  <div>
    <router-link
      :to="{ name: 'PlaylistDetails', params: { id: playlist.id } }"
      @click="handleViews"
    >
      <div>
        <button>test</button>
        <p>{{ playlist.views }}</p>
      </div>
    </router-link>
  </div>
</template>

<script>
import useDocument from "../composables/useDocument";
import { useRouter } from "vue-router";

export default {
  props: ["playlist"],
  setup(props) {
    const { updateDoc } = useDocument("playlists", props.playlist.id);
    const router = useRouter();

    const handleViews = async () => {
      const res = await updateDoc({
        views: props.playlist.views++,
      });
    //   await router.push({
    //     name: "PlaylistDetails",
    //     params: { id: props.playlist.id },
    //   });
      console.log("add view");
    };

    return {
      handleViews,
    };
  },
};
</script>

The PlaylistDetails component

<p>{{ playlist.views }}</p>