How to update v-for when range changes Vuejs

Issue

I am attempting to have a button that can add additional copies of a component when clicked, and the best way I could figure to do that is loop through a range and update that range. What I have below is what I tried.

       <Component v-for="index in count" :key="index"/>
      <button @click="count++">Add Component</button>

However, this doesn't work, in that while count is properly updated, addition components don't appear. I'm not sure how to resolve this issue, or even if this is the correct way to do what I am trying to do. I have also tried this.$forceUpdate() and no luck. Any assistance would be helpful.

Thank you.

Solution

use a ref for the counter.

https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for

<script setup>
import { ref } from 'vue'

const counter = ref(1)
</script>

<template>
  <div v-for="index in counter">
    Component
  </div>
  <button @click="counter++">Add Component</button>
</template>

Answered By - bsatprivat