I expect to get one of the Radiobuttons to be selected depending on the "v-model"-value

Independent of the value, the radio group always selects the last radio button in my group. In the HTML & JavaScript below you can see a group of buttons all having the same name(radio) with different radioValues referring to the data property, "radio". However I change these values, only the last radio button is selected. You can see that I am importing the mdbInput. What am I doing wrong or have I found a bug?

HTML:

                <p>
              <mdb-input type="radio" id="radio-1" name="radio" radioValue="regular" v-model="radio" label="Som vanligt" />
              <mdb-input type="radio" id="radio-2" name="radio" radioValue="pause" v-model="radio" label="Pausa sidan" />
              <mdb-input type="radio" id="radio-3" name="radio" radioValue="retire" v-model="radio" label="Pensionera sidan och flytta kameran" />
            </p>

JavaScript:

import { mdbTab, mdbTabItem, mdbTabContent, mdbTabPane, mdbContainer, mdbCol, mdbRow, mdbIcon, mdbInput } from 'mdbvue'
export default {
name: 'CameraDetailsPage',
components: {
  mdbTab,
  mdbTabItem,
  mdbTabContent,
  mdbTabPane,
  mdbContainer,
  mdbCol,
  mdbRow,
  mdbIcon,
  mdbInput
},
data() {
  return {
    pillsActive: 0,
    verticalWithin: 0,
    cameraPage: '',
    radio: "regular"
  }
}