Table matrix with multiple checkboxes or radio buttons

How would I go about building something like this?

What have you tried? Please provide code.

Please provide code related to your issue. Without it, it’s hard for us to help. You can refer to our guide on asking for help for more information. Thanks!

Sorry about that, I have the tried the following as a global component:

<table class="table">
  <thead>
    <tr>
      <th
        v-for="heading in headings"
        :key="heading.index"
        scope="col"
      >
        <div v-if="heading !== 'question'">
          {{ heading.name }}
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr
      v-for="(quest, index) in questions"
      :key="quest.id"
    >
      <th
        :id="'question' + index"
        scope="row"
      >
        {{ quest.details }}
      </th>
      <td
        v-for="option in quest"
        :key="option.uuid"
      >
        <div class="custom-control-primary custom-control custom-radio">
          <input
            :id="option.uuid"
            :name="option.uuid"
            type="radio"
            :value="option.value"
            :checked="option.value === value"
            :class="inputClass"
            :disabled="disabled"
            :required="required"
            class="custom-control-input"
            @change="updateValue(option.value)"
          ><label
            :id="option.uuid"
            :for="option.uuid"
            class="custom-control-label"
          />
        </div>
      </td>
    </tr>
  </tbody>
</table>

and these props and methods:

        props: {
        label: {
          type: String,
          required: false,
          default: '',
        },
        headings: {
          type: Array,
          required: true,
        },
        questions: {
          type: Array,
          required: true,
        },
        value: {
          type: [String, Number, Boolean, Object],
          default: null,
        },
        required: {
          type: Boolean,
          default: false,
        },
        disabled: {
          type: Boolean,
          default: false,
        },
        inputClass: {
          type: [String, Object],
          default: '',
        },
        name: {
          type: String,
          required: true,
        },
        question: {
          type: String,
          required: false,
          default: '',
        },
        question_description: {
          type: String,
          required: false,
          default: '',
        },
      },
      data() {
        return {
          striped: false,
          bordered: false,
          borderless: false,
          outlined: false,
          small: false,
          hover: false,
          dark: false,
          fixed: false,
          footClone: false,
          headVariant: null,
          tableVariant: 'none',
          noCollapse: false,
        }
      },
      methods: {
        updateValue(value) {
          this.$emit('input', value + this.question)
          console.log(value)
        },
      },