I once had a bit different setup where, inside the v-list-item, I had several elements, and in that order viz. v-list-item-title, v-hover, v-row, v-col, v-menu, v-list, and v-list-item.

Now, the problem was, the value of the main v-list-item-group model was set to a random value when the v-list item was clicked (inside the v-menu). The solution then I found was, I set the value to the v-list-item (inside the v-menu) to the expected value. That resolved the value issue.

The second issue that appeared was since the v-list-item of the v-menu now has a value, and it’s also a current/active value of the model, it was solved then by the following:

I put flat to v-list, so that the background styling disappears, next the icon color was a bit heavy, which was then manually set to grey, the expected colour, via primary attribute. Last was the font-weight which was set to the v-list-item and that solved it.

In the ui we had a listing of some items, which had options of edit and delete.