[Vuejs]-How to rendering vue-component in vue file with (vue-server-renderer)

I’ll break it down in two simple steps:

Step 1: Displaying a value (any value) in a vue component:

<template>
  <div>
    Display example string: {{ example_string }}
    Another way to display a string: 
    <span v-text="example_string"></span>

    A way to display an object (for debugging purposes mostly):
    <pre>{{example_data}}</pre>
  </div>
</template>
<script>
export default {
   data() {
       return {
          example_string: 'This is an example string',
          example_data: { id: 1, name: 'Example' }
       }
   }
}
</script>

Step 2: Fetching a response from the server and using the data:

<script>
export default {
    data() { 
        return {
            // we will fetch data from server and store them
            // in example_data. 
            example_data: null
        }
    },

    // To ensure the data gets loaded on page start/component initialisation:
    mounted() {
        this.loadData();
        // or: this.loadData2();
    },

    methods: { 
       // async await example:
       async loadData() {
          var data = await (fetch(url).then(response => response.json());

          this.example_data = data;
       },

       // without async/await:
       loadData2() {
          fetch(url).then(response => response.json()).then(data => {
             this.example_data = data;
          });
       }
    },

}
</script>

Edit:
the data() function is a special Vue function. It returns an object with values that will be available to inside your vue template and on the this object in all other function. The functions you created that return value should be rewritten like so. Please note that I cannot test against any backend so interpret these code samples as examples:

#BACK:

<template>
  <div class="container">
    <p v-if="data_error">{{ data_error }}</p>

    <h2>ASYNC Test sur une chaine de caractère</h2>
    <div><p>Display example string: {{ data_string }}</p></div>

    <h2>ASYNC Test sur un object</h2>
    <div><pre>{{ data_object }}</pre></div>
  </div>
</template>
<script>
  export default {
    // Vue's special data function
    data() {
       return {
           data_string: null,
           data_object: null,
           data_error: null
       }
    },
    // Vue's special 'mounted' (initialisation function)
    mounted() {
        // We want to load data when the page loads.
        this.asyncData();
    },

    methods: { 
      // Always write your function inside this methods object.
      async asyncData() {
        try {
          const responseString = await fetch('http://localhost:8080/test/string');
          const string = await responseString.json();

          const responseObject = await fetch('http://localhost:8080/test/object');
          const object = await responseObject.json();

          this.data_string = string;
          this.data_object = object;
          this.data_error = null;
        } catch (e) {
          console.error("SOMETHING WENT WRONG :" + e);
          this.data_error = e;
        }
      }
    }
  }
</script>

#FRONT:

<template>
  <div v-html="data_compCount"></div>
</template>
<script>
  export default {
    // Vue data function.
    data() {
       return {
           data_compCount: null
       }
    },
    // Vue mounted function
    mounted() {
       this.asyncData();
    },
    methods: { 
      async asyncData({ params }) {
        try {
          const responseCounter = await fetch('http://localhost:8080/test/count');
          const compCount = await responseCounter.json();

          this.data_compCount = compCount;
          this.data_error = null;
        } catch (e) {
          console.error("SOMETHING WENT WRONG :" + e);
          this.data_error = e;
        }
      }
    }
  }
</script>