JavaScript foreach elements and create new ones

Question

I have some struggles with creating some 'advanced' function for foreaching array and creating new object from it. I'm using Vue 3 for this project. It's kinda working, but it has some kind of delay.

So I have 2 inputs, one is key and the other ones are tags.

Imagine that I have key 'Size' and for this key I have values ['X', 'M', 'L']. And I could add as many keys and tags as I want. I'm calling them Attributes and Attribute Values, and I'm creating Variations from them.

First defining consts

const attributes = ref([])
const tagsValue = []
const variants = ref([])

So I have 2 functions that can create attribute like:

function addAttribute(){
  attributes.value.push({
    name: '',
    tags: []
  })
}

and I'm creating them from template like:

<VButton color="danger" icon="feather:plus" @click="addAttribute()" raised rounded>
   Add Attribute
</VButton>

And I'm listing this attributes like:

<div v-for="(attribute, index) in attributes">
  <div class="columns">
    <div class="column is-3">
        <VField label="Attribute">
          <VControl>
            <input
              v-model="attributes[index].name"
              type="text"
              class="input"
              placeholder="Size, Color, Location or anything else :)"
            />
          </VControl>
        </VField>
    </div>
      <div class="column is-8">
        <VField label="Values">
          <VControl>
            <Multiselect
              v-model="attributes[index].tags"
              mode="tags"
              :searchable="true"
              :create-tag="true"
              placeholder="Add tags"
              @input="addVariant()"
            />
          </VControl>
        </VField>
      </div>
  </div>
</div>

As you see, I'm creating attributes and values for them, here is the hard part. I have to create variants like:

function addVariant(payload: any) {
  const parts = attributes.value.map(attribute => attribute.tags.map((value: any) => ({
    value: value,
    key: attribute.name,
  })))

  const combinations = parts.reduce((a, b) => a.reduce((r: string | any[], v: ConcatArray < never > ) => r.concat(b.map((w: ConcatArray < never > ) => [].concat(v, w))), []))

  for (const combination of combinations) {
    variants.value.push({
      title: generateVariationName(combination),
      sale_price: '',
      real_price: '',
      sku: '',
      barcode: '',
      quantity: '',
      options: combination,
    })
  }
}

So this function is working, there is no errors in console but here is what is happening:

When I add first tag, it will do nothing, when I add secound one, it will create some but not correct, when I delete tag it will add even more. The problem is that, this function is working in Vue 2, but with different tag library.

The end result should look like: attribute Size with attribute_values [X, M, L] and attribute Color with attribute_values [Red, Green]

Result should be

X/Red
M/Red
L/Red
X/Green
M/Green
L/Green