How to change v-text-field width in Vuetify?

You can do it by css in scoped style:

<style scoped>
/deep/ .v-text-field{
      width: 400px;
}
</style>

and for detailed information read Vuetify documentation.

Since the toolbar is display:flex you could use class="shrink"...

      <v-text-field 
            hide-details 
            label="Filled" 
            placeholder="Search" 
            filled 
            rounded 
            dense 
            single-line 
            append-icon="mdi-magnify" class="shrink">
      </v-text-field>

Demo: https://codeply.com/p/h3Y8u3nK7P