title: How to react to route changes on Vue 3, "script setup" composition API?
body: <p>This is an example of routes I have in my application:</p>
  <pre><code>{
    path: &quot;/something&quot;,
    name: &quot;SomeRoute&quot;,
    component: SomeComponent,
    meta: {showExtra: true},
  },
  {
    path: &quot;/somethingElse&quot;,
    name: &quot;SomeOtherRoute&quot;,
    component: SomeOtherComponent,
  },
  </code></pre>
  <p>Then I have the following component, which as you will notice has two <code>script</code> tags, one with composition API, one without:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      This will always be visible. Also here's a number: {{ number }}
    &lt;/div&gt;
  
    &lt;div v-if=&quot;showExtra&quot;&gt;
      This will be hidden in some routes.
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script setup lang=&quot;ts&quot;&gt;
  import type { RouteLocationNormalized } from &quot;vue-router&quot;
  import { ref } from &quot;vue&quot;
  
  const number = 5
  const showExtra = ref(true)
  
  const onRouteChange = (to: RouteLocationNormalized) =&gt; {
    showExtra.value = !!to.meta?.showExtra
  }
  &lt;/script&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from &quot;vue&quot;
  
  
  export default defineComponent({
    watch: {
      $route: {
        handler: &quot;onRouteChange&quot;,
        flush: &quot;pre&quot;,
        immediate: true,
        deep: true,
      },
    },
  })
  &lt;/script&gt;
  </code></pre>
  <p>This works correctly: when I enter a route with <code>meta: {showExtra: false}</code> it hides the extra div, otherwise it shows it.</p>
  <p>What I want to do, however, is achieve the same by only using the composition API, in other words removing the second <code>&lt;script&gt;</code> tag entirely. I have tried this:</p>
  <pre><code>&lt;script setup lang=&quot;ts&quot;&gt;
  import type { RouteLocationNormalized } from &quot;vue-router&quot;
  import { ref } from &quot;vue&quot;
  import { onBeforeRouteUpdate } from &quot;vue-router&quot;
  
  
  // ...
  // same as before
  // ...
  
  onBeforeRouteUpdate(onRouteChange)
  &lt;/script&gt;
  </code></pre>
  <p>But this won't take effect as expected when I switch route. I'm aware of the <code>watch</code> function I could import, but I'm unsure how to get the meta information about the route and how to appease the type checker.</p>