Using HTMLCanvas element how to draw line with specific condition in Vuejs?

var example1 = new Vue({
  el: '#example-1',
  data: {
    questions: [{
        id: '1',
        message: '1',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '2',
        message: '2',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '3',
        message: '3',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '4',
        message: '4',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '5',
        message: '5',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '6',
        message: '6',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '7',
        message: '7',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
    ],
    answers: [{
        id: '1',
        message: '1',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '2',
        message: '11',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '3',
        message: '3',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '4',
        message: '2',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '5',
        message: '5',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '6',
        message: '2',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '7',
        message: '4',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '8',
        message: '5',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '9',
        message: '4',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
      {
        id: '10',
        message: '4',
        checked: false,
        statuses: ['match', 'closeTo', 'veryfar']
      },
    ]
  },
  methods: {

  }
})

.example-1 {
  float: left;
}

.example-2 {
  float: right;
  margin-top: -144px;
}

.container {
  padding: 20px;
}

.container2 {
  width: calc(100% - 105px);
  padding: 8px 0;
  height: 30px;
  box-sizing: border-box;
}

.h-line {
  height: 1px;
  margin-bottom: 18px;
  width: 100%;
  background-color: black;
}

<div class="container">
  <div id="example-1">
    <div v-for="que in questions" :key="que.id" :que="que">
      <input type="checkbox" v-model="que.checked" /> {{ que.message }}
    </div>



    <div class="example-2">
      <div v-for="ans in answers" :key="ans.id" :ans="ans">
        <input type="checkbox" v-model="ans.checked" /> {{ ans.message }}

      </div>
    </div>