Vue component in Vuetify DataTable item slot

I have a reusable component with some validations that I'd like to include in the item slot of a Vuetify data table but for some reason it's not returning a value through $emit. Can't figure out where I'm going wrong

<template>
  <v-text-field
    v-model="quantityModel"
    name="quantity"
    outlined
    type="number"
  ></v-text-field>
</template>

<script>
export default {
  props: {
    quantity: {
      type: [Number, String],
      required: true
    }
  },
  computed: {
    quantityModel: {
      get: function() {
        return this.quantity
      },
      set: function(newValue) {
        console.log('updating')  // this is being set off but items are not updated
        this.$emit('update:quantity', newValue)
      }
    }
  }
}  
</script>

And then here's how I'm including the component in the data table where items is an array of objects [{ id: 5, description: 'ITEM 1', quantity: '' }, ...]

<v-data-table
  :headers="headers"
  :items="items"
>
  <template v-slot:item.quantity="props">
    <Quantity :quantity.sync="props.item.quantity" />
  </template>
</v-data-table>