Vue function fires multiple times

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


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

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

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

newText: function(argT) {
        const text = argT;
        this.text = text;
        console.log('text', this.text);

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

props: ['text'],

       console.log('text', this.text)

Screenshot from 2020-07-28 11-22-01

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!