How to get starting position character value of a text selected in a paragraph with vue.js

I want to retrieve the starting position of selected text in paragraph.

For example if the paragraph text is "This is a paragraph." and I select "paragraph" with my cursor, the computed property value should be 10.

I tried the strategy explained in https://stackoverflow.com/a/48149119/10373864. Here is the code:

<p ref="paragraph">This is a paragraph.</p>

computed: {
  start: function () { 
    return this.$refs.paragraph.selectionStart
  }
}

However, the value of start is undefined. It seems the method above only works with textarea. I cannot use textarea. How can I make it work with a paragraph?