Tengo un problema en mi componente vuejs donde aparentemente estoy buscando un componente del DOM antes de que se cree el DOM. Recibo el siguiente error cuando cambio de una página del mismo sitio web y luego vuelvo a la vista.

 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'checked') at Selection.eval [as property]

Mi plantilla vuejs es la siguiente (la parte importante es la casilla de verificación de entrada):

 <template> <div class="billabilityPlot" v-if="$store.state.monthlyBillability.items?.length > 0"> {{ chart($store.state.monthlyBillability.items) }} </div> <div class="chart"> <h3>Billability plot</h3> <svg id="chart" width="800" height="400"></svg> Choose year: <select id="year"></select> <input type="checkbox" id="sort"> Toggle sort </div> </template>

Y la parte a la que trato de acceder al componente DOM es una función de trazado d3js , para una mejor legibilidad solo pondré un fragmento (parte clave d3.select("#sort").property("checked") ):

 export default { methods: { chart(billabilityData) { // SOME CODE // update(2021, 0) function update(year, speed) { // SOME CODE data.sort(d3.select("#sort").property("checked") ? (a, b) => b.billability - a.billability : (a, b) => months.indexOf(a.month) - months.indexOf(b.month)) var bar = svg.selectAll(".bar") .data(data, d => d.month) bar.exit().remove(); } var checkbox = d3.select("div.chart").select("#sort") .style("margin-left", "45%") .on("click", function() { update(select.property("value"), 750) }) }

Revisé algunos blogs y el uso de referencias podría ser una opción. Pero no estoy seguro, si es lo que necesito, y cómo aplicarlo aquí. Se agradecerían algunos consejos.