4👍
I have been thinking of two possible approaches. Each of them use a separate component for the modal.
1. Use v-model for the current selected item
Use the modal component as any other input: declare a v-model on the component. When the modal is hidden, reset the current item to null from inside the modal component. The v-model magic will do the rest.
Full example here:
https://codesandbox.io/s/bootstrap-vue-sandbox-w8j09
2. Reset the current selected item from outside the modal component
This is pretty much the approach you have shown in your code. The modal component is only responsible for displaying the details. When to show the modal, or when to set the current selected item is the parent’s responsibility.
In this example, I used a similar implementation as yours. I just use v-model on the modal component to avoid the this.$bvmodal.show and make the code more ‘declarative’.
https://codesandbox.io/s/bootstrap-vue-sandbox-rwll4
Both approaches make them possible to change the details component into something other than a modal.
Although the first approach is less verbose, I would go for the second approach because is leaves the responsibility of showing/hiding the details from outside.