Vue 3: component `:is` in for loop fails

When using script setup, you need to reference the component and not the name or key.

To get it to work, I would use an object where the string can be used as a key to target the component from an object like this:

<script setup>
    import CompA from './CompA.vue'
    import { ref } from 'vue'
    const components = {CompA};

    // I do NOT want to use [CompA, CompA] because my inputs are strings
    const componentTreeName = ["CompA", "CompA"]
</script>

<template>
  <h1>Demo</h1>
  <template v-for="compName in componentTreeName">
    <component :is="components[compName]"></component>
  </template>
</template>

To use a global component, you could assign components by pulling them from the app context. But this would require the app context to be available and the keys known.

example:

import { app } from '../MyApp.js'
const components = {
  CompA: app.component('CompA')
}

I haven't tested this, but this might be worth a try to check with getCurrentInstance

import { ref,getCurrentInstance } from 'vue'
const components = getCurrentInstance().appContext.components;

Use resolveComponent() on the component name to look up the global component by name:

<script setup>
import { resolveComponent, markRaw } from 'vue'
const myGlobalComp = markRaw(resolveComponent('my-global-component'))
</script>

<template>
  <component :is="myGlobalComp" />
<template>

demo 1

If you have a mix of locally and globally registered components, you can use a lookup for local components, and fall back to resolveComponent() for globals:

<script setup>
import LocalComponentA from '@/components/LocalComponentA.vue'
import LocalComponentB from '@/components/LocalComponentB.vue'
import { resolveComponent, markRaw } from 'vue'

const localComponents = {
  LocalComponentA,
  LocalComponentB,
}

const lookupComponent = name => {
  const c = localComponents[name] ?? resolveComponent(name)
  return markRaw(c)
}

const componentList = [
  'GlobalComponentA',
  'GlobalComponentB',
  'LocalComponentA',
  'LocalComponentB',
].map(lookupComponent)
</script>

<template>
  <component :is="c" v-for="c in componentList" />
</template>

demo 2

Note: markRaw is used on the component definition because no reactivity is needed on it.

If you need your component repeated you can write this code:

<script setup>
import CompA from './CompA.vue'
import { computed, ref } from 'vue'

// Example input
const componentTreeName = ["CompA", "CompA"]

// Map component names to actual components
const components = {
  CompA,
}

const componentsToShow = computed(() => 
  componentTreeName.map(name => components[name])
)
</script>

<template>
  <h1>Demo</h1>
  <template v-for="(comp, index) in componentsToShow" :key="index">
    <component :is="comp"></component>
  </template>
</template>

I modified your code to this and this works.

<script setup>
    import CompA from './CompA.vue'
    import { ref, getCurrentInstance } from 'vue'

  const components = getCurrentInstance().appContext.components;
  // I do NOT want to use [CompA, CompA] because my inputs are strings
    const componentTreeName = [CompA, CompA]
</script>

<template>
  <h1>Demo</h1>
  <template v-for="compName in componentTreeName">
    <component :is="compName"></component>
  </template>
</template>

Refer to this link to see working example -> https://play.vuejs.org/#eNqVU8Fu2zAM/RVOl6RAZmPdTpkboEsLLDukxRZgh3kH1WYSZbZkSHSaIfD/7D/2Y6PkJHWbbGsvhsX3SD4+SltxWVXRukYxFInLrKoIHFJdjVKdkiorYwnGpqwuYW5NCb0oDief0utQtmBxPoAF0ri2FjVNtCOpM4Rml7hL0ACZYYy/nKmZ6eDiRF7/LJJVNTaacEPRA/m9rxDHMIHcwPRmBvdSE5CB2iF8C9oGreDvcIeZ9OHyJyhd1dxJWgRHVumF8+KfKJlZxKkskQU9rpTqJG7N8bbohLCsCknIJ4Bk+WZ0haVJYv4JgT0M69dzYy9S4TuEwkofd0tFyOK8AwRD5TppzEjiA9j2iDsaOgcxEIf9nFhpd1tHm2ndKN2C52e837ut2VlFBXtWqBxhiRZ7Z/8x43y03YYiTcOOnLfRYD/bUZocC56M8TD2Y+UzeVfgy5UrvcKM+lxVKn0lSaaCRR5N8xGLwsBXY4v81TOmaHcSJEGODkpJ6vcvi3xxvP07xtMRyHHfuVpEK2c0j7ENpLBJVaC9qUixrlQMISAekyzr/lOIka1xsI9nS8x+nIiv3MbHUnHLYtCu+XocMJKWn1ILX3+Z8tPpgGx+XTD7H+BndKaovcaW9qHWOcvu8ILaSVgGv6KZu94Qarcfygv1zCbwU8EL8tfxb6M/yH0bvQt5qW5E8wfK75B9