[Vuejs]-Props being mutated in VueJS

Don’t make hiddenMode a prop; set it to state through data:

//parent
props: ["base_amount", "value_added_tax"],


data() {
   return {
        hiddenMode: false
   }
},
...

edit:

You should also move hideForm() to the parent component and instead bind to PaymentForm’s onlick:

@click="$emit('clicked')"

then in the parent component bind hideForm to the clicked emit:

<PaymentForm v-if="!hidden" :hidden="hiddenMode" @clicked="hideForm"/>

Note: the $emit doesn’t have to be called "clicked" you can name it anything

Use the .sync modifier. This way the child component does not modify the property directly. So the parent would be

<PaymentForm v-if="!hidden" :hidden-mode.sync="hiddenMode" />

and the child would be

hideForm() {
  this.$emit('update:hiddenMode', true);
}

First, there is a logical problem here. If hidden is false then the first DIV and children including PaymentForm are not existing.
If hidden is true the PaymentForm not showing too because you have a <PaymentForm v-if="!hidden"

Second, your PaymentForm has a hiddenMode prop and you don’t set it in the parent vue. You should have :hiddenMode="hidden" and not :hidden="hiddenMode"

For you hideForm function use $emit

  this.$emit('update:hiddenMode', true);