Vue function fires multiple times

[yjay]

I have function that updates text @click but it keeps running multiple times:

User.vue

<div  @click="newText('Volume')">
<Chart :text=text ></Chart>
Volume
</div>

<div  @click="newText('Temperature')">
<Chart :text=text ></Chart>
Temp
</div>

<div  @click="newText('Weight')">
<Chart :text=text ></Chart>
weight
</div>

<script>
newText: function(argT) {
        const text = argT;
        this.text = text;
        console.log('text', this.text);
</script>
},

In Chart component when I console.log it ran 9 times!

props: ['text'],

text1(){
       console.log('text', this.text)
    },

It seems that since my User component is displayed 3 times(intentionally due to an array of 3 users I have) and there is a box for each measurement(temp, vol and weight), that’s why it’s 9 times. But I’m not sure why it runs each time.

I’ve tried adding @click.stop but it didn’t seem to help.

I have an example here but in the real project the modal opens only once for whatever was clicked.

I would like it to run only once for the box I clicked.
Any help would be great, thanks!