v-bind Datepicker min and max

Expected behavior

When I v-bind the min/max to a computed property, the min/max value will be updated after rendering based on the computed property

Actual behavior

When I v-bind the min/max to a computed property, the min/max value is never updated

Resources (screenshots, code snippets etc.)

<template>
  <MDBCol col="6">
    <MDBDatepicker 
      v-model="startDate"
      label="Start Date"
      placeholder="YYYY-MM-DD"
      :id="startID"
      format="YYYY-MM-DD"
      v-bind:max="startMax"
      @change="handleStartChange"
      @close="handleStartChange"
    /> 
  </MDBCol>
  <MDBCol col="6">
    <MDBDatepicker 
      v-model="endDate"
      label="End Date"
      placeholder="YYYY-MM-DD"
      :id="endID"
      format="YYYY-MM-DD"

      @change="handleEndChange"
      @close="handleEndChange"
    />
  </MDBCol>
</template>

<script>
import { MDBDatepicker, MDBCol } from 'mdb-vue-ui-kit'
import { computed, ref } from '@vue/reactivity'
export default {
  components:{
    MDBDatepicker, 
    MDBCol
  }, 
  props:{
    id: String,
    parentMax: String,
    index: Number
  }, 
  setup(props) {

    const startDate = ref()
    const endDate = ref()

    const startMax = computed(()=> {
      let startMax
      if(endDate.value){
        let max = endDate.value
        let maxArray = max.split('-')
        maxArray.reverse()
        startMax = maxArray.join('/')
      }
      return startMax
    })
    const endMin = computed(()=> {
      let endMin
      if(endDate.value){
        let min = endDate.value
        let minArray = min.split('-')
        minArray.reverse()
        endMin = minArray.join('/')
      }
      return endMin
    })

    const startID = props.id + '.start'
    const endID = props.id + '.end'

    return{
      startDate, endDate, startID, endID, startMax, endMin,
    }
  }
}
</script>