VueJS cannot update component

Question

I have this Vue 1 component that gets an object as a prop that must be filled in by the user.

The object has the following structure:

{
    property1: ...,
    property2: ...,
    inputs: {
        2130: { value: ..., comment: ... },
        2131: { ... },
        ...,
    }

}

The component is a simple modal with a form containing all necessary inputs. I want to check some content, do calculations and change cell styles based on user input.

When the modal adds %

• Declare a new variable in the data, I named it key (in my case it was a number, but any will do)
• Create an update function that switches key from 1 to 0 and vice versa.
• Bind this function to each input or selection @blur event
• Since my entire modal is based on computed properties

Answer 1

Better answer

After gentle debugging, I successfully solved this problem.

Essentially, the component I describe in the question is used for two different pages: the "Create" page and the "Edit" page. My heart skipped a beat when I saw everything working as expected in the edit page.

what happened:

Components are in