remove dynamically array inside another by index

Question

hello i want to remove array index inside another array i'm explain I'm crete a three of decision i have a select will be create dynamically by loop the array.

when i click in option is create another.

reasons= [ [{one, two, three}] ] // first select
// when to click option ex: 'one' is push another array inside
reasons = [ [{one, two, three}], [{four, five,six}] ] // another select generate

I want to when i change the option in one select is remove all array after this and create a new array and so on

//if i cahnge to option 'two' is create array like this
reasons = [ [{one, two, three}], [{seven, heigth, nine}] ] 

my code the methods changeReason doesn't work is delete all array

<template v-for="reason in reasons">
              <select v-model="inputs" @change="changeReason">
                <option
                  v-for="item in reason"
                  :key="item.id"
                  :value="item.value"
                  @click="returnNotSav(reason.id)"
                >
                 reason
                </option>
              </select>
            </template>
<script>
changeReason() {
      let lastElement = this.reasons.length-1;
      this.reasons.splice(lastElement, this.reasons.length);
    }
</script>

Answer 1

I think your problem is actually with the binding. Would try this:

this.reasons = [...this.reasons.splice(lastElement, this.reasons.length)];

Answer 2

i'm resolve my problem thank you all for your ideas

let startIndex = this.reasons.findIndex(
    (reason) => !!reason.find((item) => item.id === +e.target.value)
  );
  this.reasons.splice(startIndex + 1);

+ // is a parseInt()