Dynamic pricing calculator in vue js

*Edited

I'm building a dynamic pricing calculator feature using vue js. I've made the code and there are still some problems that make the features that I made not work properly. I have a dropdown menu which when clicked will display different tabs and different content (dynamic component). And also I have an estimate card for details and prices, and every item can be deleted.

I have several problems which are as follows:

1. When I was on the Storage tab, and submit data after I selected several options, the software tab details and price also appeared in estimation card. I want is the pricing details just the Storage. Likewise if I just submit in the Software tab, then only details and prices appear from the Software tab. And if I submit in Software and Storage, the result of both will appear.

2. When I submit data on the Storage tab, and I go to the Software tab, the price details on the estimation card are gone. I want the data still appear. it's not possible if I use <keep-alive> because it's not a dynamic component.

3. I have the delete button item in the estimation card. What I want it to be will delete the item according to the option that was clicked. But still not working very well.

Currently, I only have 2 tabs, Storage and Software. If I have other tabs, how do I make this system dynamic?

Can anyone help me solve this problem and explain it step by step?

this is my code that I made on Codesandbox: https://codesandbox.io/s/dynamic-price-calculator-o77ig

from Dynamic pricing calculator in vue js