title: vue3 performance warning using ref
body: <p>vue is throwing this message:</p>
  <blockquote>
  <p>Vue received a Component which was made a reactive object. This can
  lead to unnecessary performance overhead, and should be avoided by
  marking the component with <code>markRaw</code> or using <code>shallowRef</code> instead of
  <code>ref</code>.</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
        &lt;component v-for=&quot;(el, idx) in elements&quot; :key=&quot;idx&quot; :data=&quot;el&quot; :is=&quot;el.component&quot; /&gt;
  &lt;/template&gt;
  
  
  
   setup() {
      const { getters } = useStore()
      const elements = ref([])
      onMounted(() =&gt; {
        fetchData().then((response) =&gt; {
          elements.value = parseData(response)
        })
      })
      return { parseData }
  }
  
  </code></pre>
  <p>is there a better way to do this?</p>