Incorrect radio button selecting after browser refresh

Hi, could you please tell me why, after first refreshing the browser page in Chrome, that when selecting on "Transport" in the following example does "Activity" select?

Thank you.

  <div>
<div class="flex-wrap border mx-2 px-3 py-3 mb-2">
  <span class="mr-5" style="min-width:60px;">Product Category</span>
  <mdb-input
    id="productCategory_Transport"
    v-model="productCategoryCd"
    type="radio"
    name="ProductCategoryGroup"
    label="Transport"
    radioValue="PC_Tr"
  />
  <mdb-input
    id="productCategory_Accommodation"
    v-model="productCategoryCd"
    type="radio"
    name="ProductCategoryGroup"
    label="Accommodation"
    radioValue="PC_Ac"
  />
  <mdb-input
    id="productCategory_Activity"
    v-model="productCategoryCd"
    type="radio"
    name="ProductCategoryGroup"
    label="Activity"
    radioValue="PC_At"
  />
</div>

import { mdbInput } from "mdbvue";export default { name: "HelloWorld", components: { mdbInput }, data() { return { productCategoryCd: "" }; }};

Note: Could you please fix this editor. I have just tried five times to insert code into it. Also on each attempt it clears the application and version from the support query fields.