Проблема, с которой вы столкнулись, связана с тем, что watch не отслеживает добавление новых элементов в массив автоматически. Он отслеживает только изменения существующих элементов. Чтобы решить эту проблему, вы можете использовать метод Vue.js `Vue.set()` для добавления нового элемента в массив.
Вот пример, как это можно сделать:
```javascript
Vue.set(myArray, myArray.length, newValue);
```
где `myArray` - ваш массив, а `newValue` - новое значение, которое вы хотите добавить.
Использование `Vue.set()` позволит добавить новый элемент в массив таким образом, что его изменение будет отслеживаться watch-хендлером.
Относительно проблемы с историей браузера и очисткой localStorage, вам нужно проверять наличие данных в localStorage и обновлять реактивную переменную в соответствии с этими данными при создании или обновлении компонента.
Например, вы можете проверить, есть ли данные в localStorage, и если да, то инициализировать переменную значением из localStorage:
```javascript
created() {
const data = localStorage.getItem('myData');
if (data) {
this.myArray = JSON.parse(data);
}
},
```
А при обновлении массива, добавлять новые значения в localStorage:
```javascript
watch: {
myArray(newValue) {
localStorage.setItem('myData', JSON.stringify(newValue));
},
},
```
Таким образом, при очистке истории браузера ваш watch-хендлер снова будет отслеживать изменения в реактивной переменной и сохранять их в localStorage при их возникновении.