<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=508306) </details> <!--IssueSummary end--> The following discussion from !174093 should be addressed: - [ ] @pslaughter started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/174093#note_2244816049): > **suggestion (non-blocking):** In another MR, it'd be nice to refactor these modals to use the `v-model` directive for managing visibility instead of calling child component methods. > > According to [our Pajamas docs](https://design.gitlab.com/components/modal/code): > > > You can use the v-model directive to control the modal’s visibility. The v-model directive interfaces with the visible property and the @change event. > > ... > > Note: It is recommended to use the `this.$bvModal.show()` and `this.$bvModal.hide()` methods (mentioned in the previous section) instead of using `$ref` methods.