How can i change components data in Vue.js?

You are passing the data in a bit of a messy way. So first thing is we need to split this into a parent and child component. The child component will print out your two lines, while parent component will call and pass data.

Secondly in Hello.vue you have props AND data, the template is only accessing hello and not hello1 meaning the props variable isnt parsed.

Thirdly <template> may have only 1 child so that will cause rendering issues as well.

There are different ways, but let's try this

HelloItem.vue

<template>
  <div>
    <P> {{ hello.a }} </p>
    <p> {{ hello.b }} </p>
  </div>
</template>

<script>
export default {
    data() {
       return { }
    },
    props: ['hello']
}
</script>

And now we call this twice by passing in data HelloView.vue

<template>
  <div>
    <hello-item :hello="hello1"/>
    <hello-item :hello="hello2"/>
  </div>
</template>

<script>
import HelloItem from './HelloItem.vue'
export default {
    data() {
       return {
          hello1:{
            a: "hi",
            b: "bye"
          },
          hello2:{
            a: "go",
            b: "back"
          },
       }
    },
    components:{
       'hello-item': HelloItem
    }
}
</script>

Let me know if this answers your question.