Props doesn’t feed exactly on Vuejs

1. I am a beginner of vue. I’ve recently started studying vue. I added a prop in my vue component. I reckon the code seems to be correct. but something weird has happened.

import Vue from 'vue';
import App from './App.vue';
import vSelect from 'vue-select';
import Paginate from 'vuejs-paginate';
import 'vue-select/dist/vue-select.css';

Vue.config.productionTip = false;
Vue.component('paginate', Paginate);
Vue.component('v-select', vSelect);

window.onload = function () {
    var sections = document.getElementsByClassName("newsRoom");
    let length = sections.length;
    for (var i = length - 1; i >= 0; i--) {
        sections[i].setAttribute("id", 'jsNewsListGridContainer' + i);
        sections[i].setAttribute("ref", 'jsNewsListGridContainer' + i);
        var parentElements = sections[i].parentElement;
        var endpointurlhref = parentElements.dataset.endpoint;
        var topic = parentElements.dataset.topic;
        new Vue({
            el: '#jsNewsListGridContainer' + i,
            data () {
                return {
                    endpointurl: endpointurlhref,
                    topic: topic
                }
            },
            //pass the template to the root component
            template: '<App :endpointurl="endpointurl" :topic="topic"/>',
            components: { App },
        })
    }
}

2. This is the file

<template>
 <div>
  <ProjectsContainer :endpointurl="endpointurl" :topic="topic"/>
 </div>
</template>

<script>
import ProjectsContainer from '@/components/ProjectsContainer';
export default {
    name: 'App',
    components: {
        ProjectsContainer,
    },
    props: {
        endpointurl: String,
        topic: String
    },
};
</script>

3.

    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
        <div id="jsnewslisting" class="initializeNewsList initializeNewsListContainer" ref="initializeNewsList"
          data-label-sortby="sortby" data-label-results="results" data-label-no-result-found="no results found"
          data-label-see-what-possible="see whats possible" data-label-try-to-change-filter="try to change filter"
          data-endpoint="https://5fca1f2c3c1c220016441bd2.mockapi.io/projects/newsroom" data-topic="newsroom/topic/innovation">
            <!--/*     endpoint: data-endpoint + .getNewsList.html */-->
            <!--/*     Parameters: */-->
            <!--/*     page (current page in results),topic, type, sortBy  */-->
            <!--/*     alwasy send the parameter "topic" example: endpoint?topic="newsroom/topic/innovation" */-->
            <!--/*     Muti-value params have their values separated by :  */-->
            <!--/*     codes are better example type=news:case:testimonial */  -->

          <div class="newsRoom"></div>
        </div>



      </div>
      <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
        <div id="jsnewslisting" class="initializeNewsList initializeNewsListContainer" ref="initializeNewsList"
          data-label-sortby="sortby" data-label-results="results" data-label-no-result-found="no results found"
          data-label-see-what-possible="see whats possible" data-label-try-to-change-filter="try to change filter"
          data-endpoint="https://5fca1f2c3c1c220016441bd2.mockapi.io/projects/newsroom1" data-topic="newsroom/topics/inspiration">
            <!--/*     endpoint: data-endpoint + .getNewsList.html */-->
            <!--/*     Parameters: */-->
            <!--/*     page (current page in results),topic, type, sortBy  */-->
            <!--/*     alwasy send the parameter "topic" example: endpoint?topic="newsroom/topic/inspiration" */-->
            <!--/*     Muti-value params have their values separated by :  */-->
            <!--/*     codes are better example type=news:case:testimonial */  -->
          <div class="newsRoom"></div>
        </div>
      </div>
      <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">

        <div id="jsnewslisting" class="initializeNewsList initializeNewsListContainer" ref="initializeNewsList"
          data-label-sortby="sortby" data-label-results="results" data-label-no-result-found="no results found"
          data-label-see-what-possible="see whats possible" data-label-try-to-change-filter="try to change filter"
          data-endpoint="https://5fca1f2c3c1c220016441bd2.mockapi.io/projects/newsroom2" data-topic="newsroom/topics/sustainability">
            <!--/*     endpoint: data-endpoint + .getNewsList.html */-->
            <!--/*     Parameters: */-->
            <!--/*     page (current page in results),topic, type, sortBy  */-->
            <!--/*     alwasy send the parameter "topic" example: endpoint?topic="newsroom/topic/sustainability" */-->
            <!--/*     Muti-value params have their values separated by :  */-->
            <!--/*     codes are better example type=news:case:testimonial */  -->

          <div class="newsRoom"></div>
        </div>
      </div>
    </div>

Since there are three component would be created, but when I debug and only one props data has seeded while the other two doesn’t

Is there anyway to create components without new Vue() in main.js?

Hope to someone save my day. Thanks

Answer

Seems like you are using the (checkbox group) tags so it would be problem.

<div class="form-check-input-button-wrapper" v-for="(value, index) in currentSearchedValues"  v-bind:key="index">
 <input
  type="checkbox"
  class="form-check-input-button"
  :name="value.name"
  :id="value.name.replace(' ','_')+baseURL.slice(baseURL.length - 3, baseURL.length)"
  :value="value.code"
  :checked="value.selected"
  v-model.lazy="selectedValues"
 >
 <label
  :for="value.name.replace(' ','_')+baseURL.slice(baseURL.length - 3, baseURL.length)"
  :class="{ 'form-check-label-button active' : value.selected , 'form-check-label-buton' : !value.selected }"
 >
  {{
  value.name
  }}
 </label>
</div>

Please look carefully the label :for and :id value, it should be unique and equal each other. Just let me know after you have done. Thanks.