how to manage the key press and blur with input id in vue js

<template>
  <div>
    <input
      v-model="inputValue"
      @keyup.enter="handleKeyPress"
      @blur="handleBlur"
      :id="inputId"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      inputId: "uniqueInputId"
    };
  },
  methods: {
    handleKeyPress() {
      // Your logic for key press (Enter key) goes here
      console.log("Enter key pressed");
    },
    handleBlur() {
      // Your logic for blur event goes here
      console.log("Input blurred");
    }
  }
};
</script>

<style scoped>
/ Your component-specific styles go here /
</style>