JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.4.11/dist/vuetify.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.4.11/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">

<div id="app">
  <v-app>
    <v-form>
      <v-container>
        <v-row>
          <v-col>
            <v-text-field
              v-model="value"
              :rules="rules"
              @click.native="onClick"
              placeholder="hello, world!!"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

CSS

.v-messages__message {
  display: inline;
  cursor: pointer;
}

JavaScript

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    value: '',
    rules: [
      value => !!value || 'Required.',
      value => value.length >= 10 || 'Min 10 characters',
      value => value.length <= 20 || 'Max 20 characters',
    ],
  }),
  methods: {
    onClick({ target: t }) {
      if (
        t.classList.contains('v-messages__message') &&
        t.closest('.v-messages.error--text')
      ) {
        console.log(t.innerText);
      }
    },
  },
});