Во Vue.js двусторонняя связь между родительским и дочерним компонентом не происходит по причине принципа однонаправленного потока данных (one-way data flow). Это означает, что любые данные или props, которые передаются от родительского компонента к дочернему, могут только "потоковать вниз", и изменения в пропсах дочернего компонента не поменяют их в родительском.
Если вам нужно передавать изменения данных обратно в родительский компонент, вы должны использовать пользовательские события (custom events). Вместо прямого изменения ваших пропсов в дочернем компоненте, вы должны посылать пользовательское событие обратно к родительскому компоненту с новыми данными.
Вашу ситуацию можно было бы исправить примерно таким образом:
В вашем дочернем компоненте "ProductFilter":
```vue
<template>
<div>
<!-- Здесь происходит ваша логика фильтрации -->
<button v-on:click="doSubmit">Submit</button>
</div>
</template>
<script>
export default {
props: ['filterPriceFrom'],
methods: {
doSubmit: function() {
this.$emit('update:filterPriceFrom', this.newPrice);
}
}
}
</script>
```
В вашем родительском компоненте "MainPage":
```vue
<template>
<div>
<ProductFilter :filterPriceFrom='price' @update:filterPriceFrom='price = $event' />
</div>
</template>
```
Таким образом, при срабатывании события "doSubmit", дочерний компонент будет эмитировать пользовательское событие "update:filterPriceFrom", которое будет обновлять значение `price` в родительском компоненте.