I am trying to re-write below code in vuejs.

var tooltipLine = d3.select('#groupG').append('line')

var x = d3.time.scale().range([0, that.width]);
x.domain([that.graphData[0].soldOn, that.graphData[that.graphData.length - 1].soldOn]);

const date = x.invert(d3.mouse(tooltipBox.node())[0]);
            
tooltipLine.attr('stroke', 'black')
    .attr('x1', (Math.ceil(x(date)/that.barWidth) * (that.barWidth/2)) + (Math.floor(x(date)/that.barWidth) * (that.barWidth/2)))
    .attr('x2', (Math.ceil(x(date)/that.barWidth) * (that.barWidth/2)) + (Math.floor(x(date)/that.barWidth) * (that.barWidth/2)))
    .attr('y1', 0)
    .attr('y2', that.height);

In Vuejs (in template section)

<line stroke="none" id="tooltip-line" :x1="x1" :x2="x2" y1="0" :y2="height"></line>

computed: {
    x1() {
        var x = d3.time.scale().range([0, this.width]);
        x.domain([this.graphData[0].soldOn, this.graphData[this.graphData.length - 1].soldOn]);
        
        console.log("Tooltip Line", this.tooltipLine); //this leads to null
        const date = x.invert(d3.mouse(this.tooltipRect.node())[0]);
        return (Math.ceil(x(date)/this.barWidth) * (this.barWidth/2)) + (Math.floor(x(date)/this.barWidth) * (this.barWidth/2));
    }
}

Please check below output:

Tooltip in vuejs d3.select('#tooltip-line') gives null

Tooltip in JS d3.select('#groupG').append('line') gives line object