I have an app with fish collections. I$\text{'}$m using Bootsrrap and Vue Components.

fish$-$header:

Displays a greeting, title, and user profile image.

Acts as the app's header section with minimal interaction.

fish$-$filter:

Offcanvas component allowing users to filter Lego collections.

Provides filtering options based on status, piece count, and difficulty level.

Emits real$-$time filter changes as users check$/$uncheck filter options.

my$-$collections:

Displays the filtered list of Fish sets.

Receives the collection data as a prop $($fishList$).$

Updates the list dynamically based on filters passed from the fish$-$filter component.

my$-$collections$-$item:

Represents individual Fish set details within the my$-$collections component.

Displays information like the set$$s status, piece count, and difficulty level.

fish$-$footer:

Contains an interface for adding new Fish sets to the collection.

Opens a modal for adding new items and emits an event to update the list.

fish$-$modal $($for items$)$:

A modal that opens when an item is selected.

Allows users to view or edit details of individual Lego sets.

However, i want a button inside fish$-$modal that should open a new modal with a form to update fish information and have a button when clicked updates that information. Currently editing modal is not working