Props are somehow getting mixed between components

I'm passing two different arrays to the same component but two different instances of it. Then inside those instances I do a v-for and send a single item of array to another component using props. The problem is that when I inspect the Vue tools for the last component, I see that the prop is good but when I try to assign it to data it returns the prop from previous array(the one that was sent to another component).

Laravel:

<co-notifications class-name="writable" nots=""></co-notifications>

<co-notifications class-name="writable extended" nots=""></co-notifications>

CoNotifications:

<template>
<div>
    <div v-for="notification in notifications">
        <co-notification-item :class-name="className" :not="notification"></co-notification-item>
    </div>
</div>
</template>

    <script>
    import notificationComponent from './NotificationComponent.vue';

    export default {
        props: ['className', 'nots'],
        components: {
            'co-notification-item': notificationComponent
        },
        // data() {
    //     return {
    //         notifications: JSON.parse(this.nots),
    //     }
    // },
    computed: {
        notifications(){
            return JSON.parse(this.nots)
        }
    },
    }
</script>

CoNotificationItem

<template>
<div :class="['tableItem',className]">
    <div class="textareaWrapper">
        <input type="text" class="form-control" placeholder="Title" v-model="notification.title" v-if="notification.type === 'main'">
        <textarea class="form-control" rows="6" placeholder="Some text..."
                  v-model="notification.text"></textarea>
    </div>
    <div class="buttonWrapper">
        <button type="button" class="btn btn-success" @click="updateNotification"><i
                class="fe fe-check mr-2"></i>Save
        </button>
        <button type="button" class="btn btn-danger" @click="deleteNotification"><i
                class="fe fe-check mr-2"></i>Delete
        </button>
    </div>
</div>
</template>


    <script>
    import notificationComponent from './NotificationComponent.vue';
    export default {
        props: ['className', 'not'],
        components:{
            'co-notification-item': notificationComponent
        },
        data(){
           return {
               notification: this.not
           }
        },
        methods: {
            updateNotification(){
            this.notification.text = "test";

            },
            deleteNotification(){


            }
        }
    }
</script>

As for the data in arrays, I have 2 in the arr(0) and 2 in arr(1). When I open Vue tools on the FIRST notifications I see this (THIS IS GOOD)

However, when I open other notifications that read from arr(1) I see this (this is obviously not how it's supposed to be)

As you can see I used computed for the CoNotification but if I remove it and use only data() both nots recieve the same array, but if I use computed it is okay. However, I can't use computed in CoNotificationItem beacuse I need to have it in data() so I can bind it with v-model.

So, my question is, how to make notification on the CoNotificationItem be the same as not (variable) but be accessible in data() so I can put v-model to it - why am I getting mixed values?

Note: I also tried with computed and watch and created/mounted.

I've been stuck at this problem for half the day and I searched my as* off both in official docs and tutorials/questions on stackoverflow and whatnot.

Some searches that I tried :

Vue.js passing props to data

Passing data from Props to data in vue.js

https://forum.vuejs.org/t/update-data-when-prop-changes-data-derived-from-prop/1517

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2NBPGfr
via IFTTT