Vue, filter property on Observable

Question

I'm pretty new to Vue, what I'm doing now is the following.

I receive an Item prop in my component, I spread this Item prop out over a Form data object that's defined in my component (as to have reactivity)

data() {
  return {
    form: {}
  }
mounted () {
  this.form = {
    ...this.item,
    translations: { ...this.item.translations }
  }
},

Now my local form data holds the information, including reactive translations, right?

Next thing I try to do is filter this data, but then it's failing me. If I console.log(this.form). It is an Observable (see screenshot)

Is there a way to filter, reduce, map on this 'Observable'? Am I doing 'reactivity' the right way?

Answer 1

Try clone/deepClone, before assigning the item to this.form.

Answer 2

You can access props from data() directly.

data() {
  return {
    form: {
      ...this.item,
      translations: { ...this.item.translations }
    }
  }
},
computed: {
   getForm() {
     // use filter/map method here, e.g.
     // return this.form.filter((item) => { ... })
   }
}