<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-row>
          <v-alert v-model="alert" border="left" close-text="Close Alert" :type="alertType" dark>{{ alertText }}
          </v-alert>
        </v-row>
        <v-form ref="myform" v-model="formValidity">
          <v-row>
            <v-text-field v-model="first_name" :rules="[rules.required]" solo label="First Name">
          </v-row>
          <v-row>
            <v-text-field v-model="last_name" :rules="requiredIfFirstName" solo label="Last Name">
          </v-row>
          </v-text-field>
          <v-row>
            <v-spacer></v-spacer>
            <v-btn color="success" @click="validate">Submit</v-btn>
          </v-row>
        </v-form>
      </v-container>
    </v-content>
  </v-app>
</div>
new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    formValidity: true,
    first_name: "",
    last_name: "",
    rules: {
      required: (value) => !!value || "Required."
    },
    alertText: "",
    alert: false,
    alertType: "error"
  }),
  computed: {
    requiredIfFirstName() {
      return [
        (v) => {
          if (this.first_name === "Prasad" && !v) {
            console.log("1");
            return "Last Name is required";
          }
          return true;
        }
      ];
    }
  },
  methods: {
    validate: function () {
      if (this.$refs.myform.validate()) {
        this.alertText = "Form is Valid!";
        this.alertType = "success";
        this.alert = true;
      } else {
        this.alertText = "Form is NOT Valid!";
        this.alertType = "error";
        this.alert = true;
      }
    }
  }
});

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900
  2. https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css
  3. https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js
  2. https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js