title: Vue 3: implement dynamic layout rendering with composition api correctly
body: <p>I'm trying to implement a good way to generate dynamic layout components that change according to my route meta settings (if the route has <code>meta: { layout: 'LayoutName' }</code> it should load that layout instead, otherwise it loads the default one <code>MainLayout.vue</code>).</p>
  <p>After lot of try and error <strong>I managed to get it working</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>// My main App.vue file
  &lt;template&gt;
      &lt;component :is=&quot;layout&quot;&gt;
          &lt;router-view /&gt;
      &lt;/component&gt;
  &lt;/template&gt;
  
  &lt;script setup&gt;
  
  import { defineAsyncComponent, computed } from 'vue'
  import { useRoute } from 'vue-router';
  
  let layout = computed( () =&gt; { 
          const { meta } = useRoute()
          return defineAsyncComponent( () =&gt; import(`./layouts/${meta.layout ?? 'MainLayout'}.vue`) )
      }
  )
  </code></pre>
  <p>My question is: is this way of mixing <code>computed</code> and <code>defineAsyncComponent</code> advisable?</p>
  <p>I tried to use either <code>watch</code> and <code>watchEffect</code> but didn't get to accomplish a working result. Do you have any suggestions?</p>