Preventing contact autocomplete in Safari

I am working on a pretty simple Vue typeahead to search for and select a customer record. It's working fine, except Safari (Mac, at least) attempts to autofill from my address book. Screenshot here.

I have tried everything I can think of to prevent it: declaring autocomplete="off", changing the input's name attribute, changing text inside the label, etc. Nothing short of adjusting Safari's preferences has had any effect. Ideas? Here's the component.

<template>
    <div class="relative">
        <input type="text" name="q" class="form-control" placeholder="Start typing name or customer ID" autocomplete="off" v-model="query" @keyup="autoComplete">
        <div class="text-block padding-half text-success" v-if="this.customerId">
            <i class="fa fa-check-circle"></i>&nbsp;&nbsp;{{ this.customerName }} ({{ this.customerId }})</div>
        <div class="results-menu" v-if="results.length">
            <ul class="nav nav-pills nav-stacked">
                <li v-for="result in results">
                    <a href="javascript:;" @click.prevent="selectItem(result)">{{ result.name }} ({{ result.id }})</a>
                </li>
            </ul>
        </div>
        <input type="hidden" name="customer_id" :value="customerId">
    </div>
</template>

<script>
export default {
  name: "CustomerSearch",

  data() {
    return {
      query: "",
      results: [],
      customerId: "",
      customerName: ""
    };
  },

  methods: {
    autoComplete() {
      this.results = [];

      if (this.query.length > 2) {
        axios
          .get("/admin/api/customers/search", {
            params: { q: this.query }
          })
          .then(response => {
            this.results = response.data;
          });
      }
    },

    selectItem(result) {
      console.log(result);
      this.query = result.name;
      this.customerName = result.name;
      this.customerId = result.id;
      this.results = [];
    }
  }
};
</script>

<style lang="css" scoped>
.results-menu {
  position: absolute;
  top: 31px;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fafafa;
  border: 1px solid gray;
  border-top: none;
}
input[autocomplete="off"]::-webkit-contacts-auto-fill-button,
input[autocomplete="off"]::-webkit-credentials-auto-fill-button,
input[autocomplete="off"]:focus::-webkit-textfield-decoration-container {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}
</style>