I finally figured out how to roll my own custom editor using the information @ [Custom Editor Docs][1]. It would be super helpful if there were a nice example there for Vue. I couldn't get the editor to select the text until I tried to select it in 2 different ways combined with @focus AND afterGuiAttached. Eliminating either one does not select text.

In case it helps anyone, here is my example code:

import { ref, onMounted, nextTick } from 'vue'

const originalValue = ref('')
const value = ref('')
const props = defineProps(['params'])
const input = ref(null) // reference to input

onMounted(() => {
  originalValue.value = props.params.value
  value.value = props.params.value.split(':')[1] // getting the number I need
})

const afterGuiAttached = () => {
  nextTick(() => {
    input.value.focus() // trying to select text/number
  })
}

const getValue = () => {
  // reassembling the string to be stored back to the grid
  const parts = originalValue.value.split(':')
  parts[1] = value.value
  const newValue = parts.join(':')
  return newValue
}

const isCancelBeforeStart = () => {
  // testing some logic to cancel editing
  if (props.params.value.split(':')[0] === 'a') {
    return true
  }
  return false
}

const isCancelAfterEnd = () => {
  // testing some logic to save the value or not
  console.log('saving data...', value.value)
  return value.value === 20
}

const selectAll = (event) => {
  nextTick(() => {
    event.target.select()
  })
}

defineExpose({
  afterGuiAttached,
  isCancelBeforeStart,
  isCancelAfterEnd,
  getValue
})
</script>

<template>
  <input :ref="'input'" class='simple-input-editor' v-model='value' type="number" min="0" max="24" style="height: 24px;" @focus="selectAll" />
</template>```



  [1]: https://www.ag-grid.com/vue-data-grid/cell-editors/#custom-components