How to re mounted component with composition api in vue 3

Question

I want to do a dynamically video player with Artplayer when if changing a route or router pushed or something then application render a new video player with new changed link so I face a problem that's my old videoplayer component can't rewrite instance i use watchEffect methods to detect route change and try to updated component but it's doesn't work

<template>
  <div class="w-full h-full xl:w-9/12">
    <div class="w-full h-96 xl:h-2/3 flex p-6 items-center justify-center">
      <div
        ref="player"
        class="mx-auto w-full h-full"
        v-if="reloadLink.name == this.$route.params.link"
      ></div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  nextTick,
  defineExpose,
  watchEffect,
  onUpdated,
  unmounted,
} from "vue";
import Artplayer from "artplayer";
import { useRoute } from "vue-router";

const route = useRoute();

const options = reactive({
  url: "https://player.vimeo.com/progressive_redirect/playback/364504351/rendition/1080p?loc=external&signature=66193741eea8c35bb1e8ac0c19f96e6d9f825cb04b965e073c3b7573c421eb39",
  title: "One More Time One More Chance",
  poster: "ss",
  volume: 0.5,
  isLive: false,
  muted: false,
  autoplay: false,
  pip: true,
  autoSize: true,
  autoMini: true,
  // screenshot: true,
  setting: true,
  loop: true,
  // flip: true,
  playbackRate: true,
  aspectRatio: true,
  fullscreen: true,
  fullscreenWeb: true,
  // subtitleOffset: true,
  miniProgressBar: true,
  mutex: true,
  backdrop: true,
  theme: "#23ade5",
  lang: navigator.language.toLowerCase(),
  moreVideoAttr: {
    crossOrigin: "anonymous",
  },
  quality: [
    {
      html: "SD 480P",
      url: "https://player.vimeo.com/progressive_redirect/playback/364504351/rendition/1080p?loc=external&signature=66193741eea8c35bb1e8ac0c19f96e6d9f825cb04b965e073c3b7573c421eb39",
    },
    {
      default: true,
      html: "HD 720P",
      url: "https://player.vimeo.com/progressive_redirect/playback/364504351/rendition/1080p?loc=external&signature=66193741eea8c35bb1e8ac0c19f96e6d9f825cb04b965e073c3b7573c421eb39",
    },
  ],
});
const reloadLink = {
  name: "thee",
};
console.log(reloadLink);
// options.url = "https://player.vimeo.com/progressive_redirect/playback/364499803/rendition/1080p?loc=external&oauth2_token_id=1597805160&signature=8bbd350f0737458fbbeba983b73a4d403496eb3ca0df35cda7677ea5239cf7be";
const player = ref(null);
console.log(options.url);

onMounted(() => {
  nextTick(() => {
    new Artplayer({
      ...options,
      container: player.value,
    });
  });
});
watchEffect(() => {
  // reloadLink.value = route.params.link;
  options.url = route.params.link;
  // console.log(options.url);

  reloadLink.name = route.params.link;
  () => {
    options.url = route.params.link;
  };
});
onUpdated(() => {
  options.url = route.params.link;
  unmounted(() => {
     Artplayer;
   });
});

defineExpose({
  player,
  options,
});
</script>