Why prop data update in vue template, but not in javascript part

my {{this.topic}} in the template section is update when its value in parent component is change, but the same value in the script part just keep remain the first value it get at search_params.set('param1', this.topic);, nothing wrong with other part of code, everything work fine. Yo can try it out here http://jsfiddle.net/6gk13sep/1/

For anyone who wonder how the out put should be, when you try to press the other button, the app should re-request the API with that button name

 Vue.component('child', {
  template: `
  <div>
  breedKey: {{ breedKey }}
  <br />
  topic: {{ this.topic }}
  <br />
  API DATA TEST: {{ this.point0 }}
  </div>
  `,
  props: ["breedKey", "time"],
  computed: {
    topic() {
      return this.breedKey;
    }
  },

  data() {
    return {
      point0: [],
      point1: [],
      point2: [],
    };
  },

  async created() {

    try {

      var url = new URL('https://www.mustavi.com/TimeSeries/?param1=China&param2=00');
      var search_params = url.searchParams;

      // new value of param set to my topic
      search_params.set('param1', this.topic);

You are only calling the API in created. Updates to your props won't trigger it again.

You need to watch breed and make your API call in the watch method.

watch: {
  async breedKey (oldVal, newVal) {
     // created method code
  }
}

I've updated your fiddle to see this working.