Parent must unselect a checkbox in a child component from a list

My parent component ("PersonList") contains the following data: var items = [{"name":"John"}, {"name":"Mary"}]; var selectedItems = [];

The template iterates over every item to show a child component called "Person", such as:

v-for="item in items" v-on:select="addToSelectedItems"

The person component contains a checkbox. When clicked, it emits an event called "select" which triggers a "addToSelectedItems" function that simply add an entry into the selectedItems array.

I want to add a little bit of logic in this function: when the number of selectedItems is bigger than 10, unselect the last added item and show a message.

In the addToSelectedItems function, I did:

if (this.selectedItems.length >= 10) { return; }

But of course, the checkbox in the child component is still checked. In need to uncheck it from my function but, how can I access it and how would I unselected a checkbox inside it?