Как изменить реквизит в js классе, в vuejs?

Question

В основном я получаю в своем методе через подпорку массив объектов. Затем через класс я добавлю, отредактирую или удалим объект этого расположения, полученный из подпорки

, вот мой шаблон:

    <template>
        <div>
            <el-button
            class="float-right"
            size="mini"
            type="primary"
            @click="settingsCrime.insert([...form])"
            >Add</el-button>
            <p v-for="(f,index) in form" :key="index">{{index}}</p>
        </div>
    </template>
    <script>
import SettingsCrime from './classCrime.js' //my class
export default {
    props:['form'],
    data(){
        return{
           settingsCrime: new SettingsCrime(),//instantiating the class
        }
       }
   }
</script>

Как вы увидите на кнопке, я перехожу к методу класса prop 'from'

 @click="settingsCrime.insert([...form])"

В Моем классе:

class SettingsCrime {
    constructor(){
        this._nombre = "MiClassSettings";
    }

    insert(form){
        form.push({
            to: 0,
            from: 0,
            flatCharge: 0
        });

        console.log("insert");
        return form;
    }

    edit(value){
        console.log("edit");
        console.log(value);
    }

    delete(value){
        console.log("delete");
        console.log(value);
    }
}

export default SettingsCrime;

в insert() метод Я фактически вставляю объект, но в момент отображения в компоненте точно в <p v-for = "(f, index) in form" part: key = "index"> {{index}} </p> изменение не отражается. Это как будто потеря реактивности или что я делаю неправильно? Заранее большое спасибо.