title: Element deleted from the array but v-for doesn't update VUEJS
body: <p>Guys so I'm trying to develop this rule component which can be spawned by my main component as many times as he wants but the problem is that when I delete an index from the list that tracks the number of rules, the vuejs layout doesn't update accordingly. What I mean by this is that if I check the array it self it deleted the correct item but when I look at the vue page (HTML) it either doesn't delete anything or only deletes the last item, and this may be caused by the <code>v-for</code> not updating on list change but I don't know how to solve this.</p>
  <p>NewTask.vue (Parent)</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;mt-4&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;div class=&quot;if-condition container-fluid d-flex flex-row ps-0&quot;&gt;
                &lt;span class=&quot;text-center me-2 condition rounded&quot;&gt;IF&lt;/span&gt;
                &lt;select class=&quot;form-select form-select-sm me-2 if-select&quot; v-model=&quot;if_condition&quot;&gt;
                  &lt;option value=&quot;ALL&quot;&gt;ALL&lt;/option&gt;
                  &lt;option value=&quot;ANY&quot;&gt;ANY&lt;/option&gt;
                  &lt;option value=&quot;NONE&quot;&gt;NONE&lt;/option&gt;
                &lt;/select&gt;
                &lt;span&gt;of these filters match&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;mt-2 ps-3 pt-3 pb-3 border&quot;&gt;
              &lt;new-rule v-for=&quot;(item, index) in rules&quot;
                        :key=&quot;JSON.stringify(index)&quot; v-on:remove-rule=&quot;removeRule(index)&quot;
                        :data=&quot;item&quot; :index=&quot;index&quot; v-on:data-changed=&quot;dataChanged&quot;
                        class=&quot;mb-2&quot;/&gt;
              &lt;div class=&quot;mt-2 add-rule-div&quot;&gt;
                &lt;button class=&quot;btn add-rule-btn&quot; v-on:click=&quot;addRule&quot;&gt;+&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Rule from '@/components/rule'
  
  export default {
      name: &quot;NewTask&quot;,
      components: {
        'new-rule': Rule
      },
      data: function () {
        return {
          if_condition: 'ALL',
          rules: []
        }
      },
    methods: {
        dataChanged(data) {
          const rules = this.rules;
          const index = data.index;
          delete data['index'];
          rules.splice(index, 1, data)
          this.rules = rules;
        },
        removeRule(index) {
          const rules = this.rules;
          rules.splice(index, 1)
          this.rules = rules
        },
        addRule() {
          const new_rule = {
            type_input_text: null,
            type_input_show: null,
            rule_input_text: null,
            rule_input_show: null,
          }
          this.rules.push(new_rule)
          console.log(this.rules)
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>rule.vue (Child)</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;if-condition d-flex flex-row&quot;&gt;
        &lt;select class=&quot;form-select form-select-sm me-2&quot;
                v-on:change=&quot;checkTypeSelect&quot; v-model=&quot;type_select&quot;&gt;
          &lt;option value=&quot;HTML&quot;&gt;HTML&lt;/option&gt;
          &lt;option value=&quot;XPATH&quot;&gt;XPATH&lt;/option&gt;
          &lt;option value=&quot;ID&quot;&gt;ID&lt;/option&gt;
          &lt;option value=&quot;CLASS&quot;&gt;CLASS&lt;/option&gt;
        &lt;/select&gt;
        &lt;input v-if=&quot;type_input_show&quot; type=&quot;text&quot; class=&quot;form-control me-2&quot; v-model=&quot;type_input_text&quot; v-on:change=&quot;dataChanged&quot;&gt;
        &lt;select class=&quot;form-select form-select-sm me-2&quot;
                v-on:change=&quot;checkRuleSelect&quot; v-model=&quot;rule_select&quot;&gt;
          &lt;option value=&quot;CONTAINS&quot;&gt;CONTAINS&lt;/option&gt;
          &lt;option value=&quot;EXISTS&quot;&gt;EXISTS&lt;/option&gt;
        &lt;/select&gt;
        &lt;input v-if=&quot;rule_input_show&quot; type=&quot;text&quot; class=&quot;form-control me-2&quot; v-model=&quot;rule_input_text&quot; v-on:change=&quot;dataChanged&quot;&gt;
        &lt;button class=&quot;btn remove-rule-btn pb-0 pt-0 ps-2 pe-2&quot; v-on:click=&quot;this.$emit('remove-rule')&quot;&gt;-&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;rule&quot;,
    props: {
      data: {
        type: Object,
        required: true
      },
      index: {
        type: Number,
        required: true
      }
    },
    data: function () {
      return {
        type_select: 'HTML',
        type_input_text: '',
        rule_select: 'CONTAINS',
        rule_input_text: '',
        //
        type_input_show: false,
        rule_input_show: true,
      }
    },
    beforeMount() {
      if (this.data.type_select) {
        this.type_select = this.data.type_select
        this.checkTypeSelect()
      }
      if (this.data.type_input_text) {
        this.type_input_text = this.data.type_input_text
      }
      if (this.data.rule_select) {
        this.rule_select = this.data.rule_select
        this.checkRuleSelect()
      }
      if (this.data.rule_input_text) {
        this.rule_input_text = this.data.rule_input_text
      }
    },
    methods: {
      dataChanged() {
        const new_data = {
          index: this.index,
          type_select: this.type_select,
          type_input_text: this.type_input_text,
          rule_select: this.rule_select,
          rule_input_text: this.rule_input_text
        }
        this.$emit('data-changed', new_data)
      },
      checkTypeSelect() {
        const type_select = this.type_select;
        this.type_input_show = type_select !== 'HTML';
        this.dataChanged()
      },
      checkRuleSelect() {
        const rule_select = this.rule_select;
        this.rule_input_show = rule_select !== 'EXISTS';
        this.dataChanged()
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Some images to demonstrate the issue:</p>
  <p>Array Before Index delete:
  <a href="https://i.stack.imgur.com/U5AAX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U5AAX.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/Ks04T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ks04T.png" alt="enter image description here" /></a></p>
  <p>Array After Index delete:
  <a href="https://i.stack.imgur.com/zkmO2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zkmO2.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/fONQU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fONQU.png" alt="enter image description here" /></a></p>
  <p>For further investigation feel free to visit the repo: <a href="https://github.com/DEADSEC-SECURITY/Easy-Scraper" rel="nofollow noreferrer">https://github.com/DEADSEC-SECURITY/Easy-Scraper</a></p>
  <p><strong>THIS IS NOT PUBLICITY, I TRULY NEED HELP</strong></p>