In Vue 2 I used to be able to access a property on component children (rendered inside a v-for loop using this.$refs and a dynamically-assigned :ref).

The same code in Vue 3 fails, and when I log out this.$refs the object is empty.

Here I'm wanting to access an 'isOrderable' property on all children. The problem appears to be with :ref="product.id" being a variable. If I change it to ref="foobar" then I do get the last child in this.$refs.foobar. But it vue2 me an array back containing all children components.

  <script>

  import productItem from "./Product.vue";

  export default {

    props: ["products"],

    components: {

      'product-item': productItem

    }

    methods: {

      addAllProducts() {

        const orderable = this.products.filter((p) => this.$refs[p.id][0].isOrderable);

        ...

      }

    }

  }

  </script>



  <template>

    <form>

      <div v-for="product in products" :key="product.id">

        <product-item :product="product" :ref="product.id" />

      </div>

      <button @click="addAllProducts">Add All</button>

    </form>

  </template>

Obviously something changed in vue3 but I can't find any info about it. There's plenty of info on this.$refs, and but it all has to do with accessing refs from the composition API.

Any help appreciated.