diff --git a/example/app.css b/example/app.css
index b86367f..eae2dbb 100644
--- a/example/app.css
+++ b/example/app.css
@@ -1,3 +1,423 @@
+/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+article,
+aside,
+details, /* 1 */
+figcaption,
+figure,
+footer,
+header,
+main, /* 2 */
+menu,
+nav,
+section,
+summary { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Add the correct display in IE 10-.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+select,
+textarea {
+  font: inherit; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Restore the font weight unset by the previous rule.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -67,3 +487,32 @@ h2 {
   background: #471f84;
 }
 .buttons button:active { top: 1px; }
+
+/*Tribute Styles*/
+.tribute-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: auto;
+  max-height: 300px;
+  max-width: 500px;
+  overflow: auto;
+  display: block;
+  z-index: 999999; }
+  .tribute-container ul {
+    margin: 0;
+    padding: 0;
+    margin-top: 2px;
+    list-style: none;
+    background: #fff;
+    border: 1px solid #1f0037; }
+  .tribute-container li {
+    color: #666;
+    padding: 5px 8px;
+    cursor: pointer; }
+    .tribute-container li.highlight, .tribute-container li:hover {
+      background: #fafafa; }
+    .tribute-container li span {
+      font-weight: bold; }
+  .tribute-container .menu-highlighted {
+    font-weight: bold; }
diff --git a/example/index.js b/example/index.js
index 0cd49a2..7c05f8c 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,7 +1,7 @@
 import Vue from "vue"
-import VueInputAutosize from "../"
+import VueTribute from "../"
 
-Vue.use(VueInputAutosize, { maxWidth: 500, minWidth: 20, comfortZone: 0 });
+Vue.use(VueTribute);
 
 Vue.config.debug = true
 
@@ -10,24 +10,27 @@ new Vue({
   replace: false,
   data(){
     return {
-      msg: "Hello World!"
+      items: [
+        {key: "Phil Heartman", value: "pheartman"},
+        {key: "Gordon Ramsey", value: "gramsey"}
+      ]
     }
   },
   methods: {
-    setNewText(){
-      this.msg = "This is some new text for you!";
-    },
-    clearText(){
-      this.msg = "";
+    replaceItems(){
+      this.items = [
+        {key: "Collin Henderson", value: "syropian"},
+        {key: "Amanda Glover", value: "glovelyyy"},
+        {key: "Daniel Hritzkiv", value: "dhritzkiv"},
+      ];
     }
   },
   template: `
   <div class="app">
-    <h2>vue-input-autosize</h2>
-    <input type='text' :value="msg" v-input-autosize placeholder="Enter text" class="textbox" />
+    <h2>vue-tribute</h2>
+    <input type="text" :values="items" placeholder="Enter text" class="textbox" v-tribute />
     <div class="buttons">
-      <button @click="setNewText">Set New Text</button>
-      <button @click="clearText">Clear Text</button>
+      <button @click="replaceItems">Replace Items</button>
     </div>
   </div>
   `
diff --git a/index.js b/index.js
index be7e7e7..8ae63d2 100644
--- a/index.js
+++ b/index.js
@@ -1,63 +1,55 @@
 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var Tribute = _interopDefault(require('tributejs'));
+
+if (!Tribute) {
+  throw new Error("[vue-tribute] cannot locate tributejs");
+}
+
 exports.install = function (Vue, options) {
-  Vue.directive("input-autosize", {
-    params: ["value"],
-    mirror: null,
-    val: " ",
-    options: {},
+  Vue.directive("tribute", {
+    params: ["values"],
+    tribute: null,
     paramWatchers: {
-      value: function value(val, oldVal) {
-        Vue.nextTick(this.check.bind(this, this.el));
+      values: function values(val, oldVal) {
+        var _this = this;
+
+        setTimeout(function () {
+          _this.setValues(val);
+        }, 0);
       }
     },
     bind: function bind() {
-      var _this = this;
+      var _this2 = this;
 
-      var defaults = { maxWidth: 500, minWidth: 20, comfortZone: 0 };
-      this.options = Object.assign(defaults, options || {});
-
-      this.mirror = document.createElement("span");
-      this.mirror.classList.add("vue-input-autosize-mirror");
-
-      this.el.addEventListener("input", this.check.bind(this, this.el), false);
-      setTimeout(function () {
-        var styles = window.getComputedStyle(_this.el, null);
-        Object.assign(_this.mirror.style, {
-          position: "absolute",
-          top: "-9999px",
-          left: "-9999px",
-          width: "auto",
-          whiteSpace: "nowrap",
-          opacity: 0,
-          border: styles.getPropertyValue("border"),
-          fontSize: styles.getPropertyValue("font-size"),
-          fontFamily: styles.getPropertyValue("font-family"),
-          fontWeight: styles.getPropertyValue("font-weight"),
-          letterSpacing: styles.getPropertyValue("letter-spacing"),
-          padding: styles.getPropertyValue("padding"),
-          textTransform: styles.getPropertyValue("text-transform"),
-          ariaHidden: true
+      // If it has a "values" property, it's actually a collection
+      if (this.params.values.hasOwnProperty("values")) {
+        this.tribute = new Tribute({
+          collection: this.params.values
+        });
+      } else {
+        this.tribute = new Tribute({
+          values: this.params.values,
+          options: options
         });
-        document.body.appendChild(_this.mirror);
-        _this.check(_this.el);
-      }, 0);
-    },
-    update: function update(newVal, oldVal) {
-      this.check(this.el);
-    },
-    check: function check(el) {
-      this.val = el.value;
-      if (!this.val) this.val = el.placeholder || "";
-      this.mirror.innerHTML = this.val.replace(/&/g, "&amp;").replace(/\s/g, "&nbsp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      var newWidth = this.mirror.getBoundingClientRect().width + this.options.comfortZone;
-      if (newWidth > this.options.maxWidth) {
-        newWidth = this.options.maxWidth;
-      } else if (newWidth < this.options.minWidth) {
-        newWidth = this.options.minWidth;
       }
-      if (newWidth != el.getBoundingClientRect().width) {
-        el.style.width = newWidth + "px";
+
+      this.tribute.attach(this.el);
+      this.el.addEventListener("tribute-replaced", function (e) {
+        _this2.vm.$emit("tribute-replaced");
+      });
+      this.el.addEventListener("tribute-no-match", function (e) {
+        _this2.vm.$emit("tribute-no-match");
+      });
+    },
+    setValues: function setValues(values) {
+      // If it has a "values" property, it's actually a collection
+      if (values.hasOwnProperty("values")) {
+        this.tribute.collection = values;
+      } else {
+        this.tribute.collection[0].values = values;
       }
     }
   });
diff --git a/index.umd.js b/index.umd.js
index 0809447..5c74e21 100644
--- a/index.umd.js
+++ b/index.umd.js
@@ -1,67 +1,57 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (factory());
-}(this, function () { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('tributejs')) :
+  typeof define === 'function' && define.amd ? define(['tributejs'], factory) :
+  (factory(global.Tribute));
+}(this, function (Tribute) { 'use strict';
+
+  Tribute = 'default' in Tribute ? Tribute['default'] : Tribute;
+
+  if (!Tribute) {
+    throw new Error("[vue-tribute] cannot locate tributejs");
+  }
 
   exports.install = function (Vue, options) {
-    Vue.directive("input-autosize", {
-      params: ["value"],
-      mirror: null,
-      val: " ",
-      options: {},
+    Vue.directive("tribute", {
+      params: ["values"],
+      tribute: null,
       paramWatchers: {
-        value: function value(val, oldVal) {
-          Vue.nextTick(this.check.bind(this, this.el));
+        values: function values(val, oldVal) {
+          var _this = this;
+
+          setTimeout(function () {
+            _this.setValues(val);
+          }, 0);
         }
       },
       bind: function bind() {
-        var _this = this;
+        var _this2 = this;
 
-        var defaults = { maxWidth: 500, minWidth: 20, comfortZone: 0 };
-        this.options = Object.assign(defaults, options || {});
-
-        this.mirror = document.createElement("span");
-        this.mirror.classList.add("vue-input-autosize-mirror");
-
-        this.el.addEventListener("input", this.check.bind(this, this.el), false);
-        setTimeout(function () {
-          var styles = window.getComputedStyle(_this.el, null);
-          Object.assign(_this.mirror.style, {
-            position: "absolute",
-            top: "-9999px",
-            left: "-9999px",
-            width: "auto",
-            whiteSpace: "nowrap",
-            opacity: 0,
-            border: styles.getPropertyValue("border"),
-            fontSize: styles.getPropertyValue("font-size"),
-            fontFamily: styles.getPropertyValue("font-family"),
-            fontWeight: styles.getPropertyValue("font-weight"),
-            letterSpacing: styles.getPropertyValue("letter-spacing"),
-            padding: styles.getPropertyValue("padding"),
-            textTransform: styles.getPropertyValue("text-transform"),
-            ariaHidden: true
+        // If it has a "values" property, it's actually a collection
+        if (this.params.values.hasOwnProperty("values")) {
+          this.tribute = new Tribute({
+            collection: this.params.values
+          });
+        } else {
+          this.tribute = new Tribute({
+            values: this.params.values,
+            options: options
           });
-          document.body.appendChild(_this.mirror);
-          _this.check(_this.el);
-        }, 0);
-      },
-      update: function update(newVal, oldVal) {
-        this.check(this.el);
-      },
-      check: function check(el) {
-        this.val = el.value;
-        if (!this.val) this.val = el.placeholder || "";
-        this.mirror.innerHTML = this.val.replace(/&/g, "&amp;").replace(/\s/g, "&nbsp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-        var newWidth = this.mirror.getBoundingClientRect().width + this.options.comfortZone;
-        if (newWidth > this.options.maxWidth) {
-          newWidth = this.options.maxWidth;
-        } else if (newWidth < this.options.minWidth) {
-          newWidth = this.options.minWidth;
         }
-        if (newWidth != el.getBoundingClientRect().width) {
-          el.style.width = newWidth + "px";
+
+        this.tribute.attach(this.el);
+        this.el.addEventListener("tribute-replaced", function (e) {
+          _this2.vm.$emit("tribute-replaced");
+        });
+        this.el.addEventListener("tribute-no-match", function (e) {
+          _this2.vm.$emit("tribute-no-match");
+        });
+      },
+      setValues: function setValues(values) {
+        // If it has a "values" property, it's actually a collection
+        if (values.hasOwnProperty("values")) {
+          this.tribute.collection = values;
+        } else {
+          this.tribute.collection[0].values = values;
         }
       }
     });
diff --git a/karma.conf.js b/karma.conf.js
index 4a94c37..2a720d7 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -12,10 +12,13 @@ module.exports = function(config) {
     browsers: ["PhantomJS"],
     reporters: ["spec"],
     browserify: {
-      transform: [["babelify", {
-        presets: ["es2015"],
-        plugins: ["transform-runtime"]
-      }]],
+      transform: [
+        ["babelify", {
+          presets: ["es2015"],
+          plugins: ["transform-runtime"]
+        }],
+        ["aliasify", { aliases: { "tributejs": "./node_modules/tributejs/dist/tribute.min.js"} }]
+      ]
     }
   });
 }
diff --git a/package.json b/package.json
index 9725f56..04f15b6 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "vue-input-autosize",
-  "version": "0.2.2",
-  "description": "A simple Vue.js directive to autosize text input fields",
+  "name": "vue-tribute",
+  "version": "0.1.0",
+  "description": "A Vue.js wrapper for Zurb's Tribute library for native @mentions",
   "license": "MIT",
-  "repository": "syropian/vue-input-autosize",
+  "repository": "syropian/vue-tribute",
   "author": {
     "name": "Collin Henderson",
     "email": "collin@syropia.net",
@@ -17,7 +17,7 @@
     "build": "BUILD_ENV=cjs rollup -c",
     "build:umd": "BUILD_ENV=umd rollup -c",
     "example": "vbuild --dev",
-    "example:build": "vbuild -t VueInputAutosize",
+    "example:build": "vbuild -t VueTribute",
     "test": "karma start karma.conf.js --single-run true --auto-watch false",
     "watch-test": "karma start karma.conf.js --single-run false --auto-watch true"
   },
@@ -27,14 +27,14 @@
     "index.umd.js"
   ],
   "keywords": [
-    "autosize",
-    "autogrow",
-    "autoshrink",
+    "tribute",
+    "mention",
     "input",
     "Vue"
   ],
   "dependencies": {},
   "devDependencies": {
+    "aliasify": "^2.0.0",
     "babel-core": "^6.11.4",
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-es2015": "^6.9.0",
diff --git a/rollup.config.js b/rollup.config.js
index 29a8a8a..8169782 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,12 +6,12 @@ const dest = env === "cjs" ? "index.js" : "index.umd.js"
 
 export default {
   entry: "./src/index.js",
-  plugins: [
-    babel({
-      exclude: "node_modules/**"
-    })
-  ],
+  external: [ "tributejs" ],
+  plugins: [ babel() ],
   dest,
   format: env,
-  moduleName: "VueInputAutosize"
+  moduleName: "VueTribute",
+  globals: {
+    tributejs: "Tribute"
+  }
 }
diff --git a/src/index.js b/src/index.js
index 12a7dfa..cf80a9f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,58 +1,50 @@
-"use strict";
+import Tribute from "tributejs";
+
+if(!Tribute){
+  throw new Error("[vue-tribute] cannot locate tributejs")
+}
 
 exports.install = function(Vue, options){
-  Vue.directive("input-autosize", {
-    params: ["value"],
-    mirror: null,
-    val: " ",
-    options: {},
+  Vue.directive("tribute", {
+    params: ["values"],
+    tribute: null,
     paramWatchers: {
-      value(val, oldVal){
-        Vue.nextTick(this.check.bind(this, this.el));
+      values(val, oldVal){
+        setTimeout(() => {
+          this.setValues(val);
+        }, 0)
       }
     },
     bind(){
-      const defaults = { maxWidth: 500, minWidth: 20, comfortZone: 0 };
-      this.options = Object.assign(defaults, options || {});
-
-      this.mirror = document.createElement("span");
-      this.mirror.classList.add("vue-input-autosize-mirror");
-
-
-      this.el.addEventListener("input", this.check.bind(this, this.el), false);
-      setTimeout(() => {
-        let styles = window.getComputedStyle(this.el, null);
-        Object.assign(this.mirror.style, {
-          position: "absolute",
-          top: "-9999px",
-          left: "-9999px",
-          width: "auto",
-          whiteSpace: "nowrap",
-          opacity: 0,
-          border: styles.getPropertyValue("border"),
-          fontSize: styles.getPropertyValue("font-size"),
-          fontFamily: styles.getPropertyValue("font-family"),
-          fontWeight: styles.getPropertyValue("font-weight"),
-          letterSpacing: styles.getPropertyValue("letter-spacing"),
-          padding: styles.getPropertyValue("padding"),
-          textTransform: styles.getPropertyValue("text-transform"),
-          ariaHidden: true
+      // If it has a "values" property, it's actually a collection
+      if( this.params.values.hasOwnProperty("values") ){
+        this.tribute = new Tribute({
+          collection: this.params.values,
         });
-        document.body.appendChild(this.mirror);
-        this.check(this.el);
-      }, 0);
+      }
+      else {
+        this.tribute = new Tribute({
+          values: this.params.values,
+          options
+        });
+      }
+
+      this.tribute.attach(this.el);
+      this.el.addEventListener("tribute-replaced", (e) => {
+        this.vm.$emit("tribute-replaced");
+      });
+      this.el.addEventListener("tribute-no-match", (e) => {
+        this.vm.$emit("tribute-no-match");
+      });
     },
-    update(newVal, oldVal){
-      this.check(this.el);
-    },
-    check(el){
-      this.val = el.value;
-      if (!this.val) this.val = el.placeholder || "";
-      this.mirror.innerHTML = this.val.replace(/&/g, "&amp;").replace(/\s/g, "&nbsp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      let newWidth = this.mirror.getBoundingClientRect().width + this.options.comfortZone;
-      if( newWidth > this.options.maxWidth ){ newWidth = this.options.maxWidth; }
-      else if (newWidth < this.options.minWidth){ newWidth = this.options.minWidth; }
-      if( newWidth != el.getBoundingClientRect().width ){ el.style.width = `${newWidth}px`; }
+    setValues(values){
+      // If it has a "values" property, it's actually a collection
+      if( values.hasOwnProperty("values") ){
+        this.tribute.collection = values;
+      }
+      else {
+        this.tribute.collection[0].values = values;
+      }
     }
   });
 
diff --git a/test/VueInputAutosize.spec.js b/test/VueInputAutosize.spec.js
deleted file mode 100644
index a1fb57c..0000000
--- a/test/VueInputAutosize.spec.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import Vue from "vue";
-import VueInputAutosize from "../src";
-
-Vue.use(VueInputAutosize);
-
-describe("vue-input-autosize", () => {
-  it("has an install method for Vue.use()", () => {
-    expect(typeof VueInputAutosize.install).toEqual("function");
-  });
-  it("creates the v-input-autosize directive", () => {
-    const vm = new Vue({
-      template: "<input type='text' v-input-autosize />",
-    }).$mount();
-
-    expect(typeof vm.$options.directives["input-autosize"]).toEqual("object");
-  });
-  it("sets the proper width according to the content of the input", (done) => {
-    const vm = new Vue({
-      el: document.body,
-      replace: false,
-      template: "<input type='text' :value='msg' v-el:test v-input-autosize style='width:200px;' />",
-      data(){
-        return {
-          msg: "Hello"
-        }
-      }
-    })
-    setTimeout(function(){
-      expect( parseInt(vm.$els.test.style.width, 10) ).toBeLessThan(200);
-      done();
-    }, 0);
-  });
-  it("uses the placeholder if there's no content to determine the width", (done) => {
-    const vm = new Vue({
-      el: document.body,
-      replace: false,
-      template: "<input type='text' placeholder='Hello' v-el:test v-input-autosize style='width:200px;' />",
-    })
-    setTimeout(() => {
-      expect( parseInt(vm.$els.test.style.width, 10) ).toBeLessThan(200);
-      done();
-    }, 0)
-  });
-  it("increases the width of the input when text is added", (done) => {
-    const vm = new Vue({
-      el: document.body,
-      replace: false,
-      template: "<input type='text' :value='msg' v-el:test v-input-autosize />",
-      data(){
-        return {
-          msg: "Hello"
-        }
-      }
-    })
-    setTimeout(() => {
-      const currentWidth = parseInt(vm.$els.test.style.width, 10);
-      vm.$set("msg", "Hello World");
-      setTimeout(() => {
-        expect( parseInt(vm.$els.test.style.width, 10) ).toBeGreaterThan(currentWidth);
-        done();
-      }, 0);
-    }, 0);
-  });
-  it("decreases the width of the input when text is removed", (done) => {
-    const vm = new Vue({
-      el: document.body,
-      replace: false,
-      template: "<input type='text' :value='msg' v-el:test v-input-autosize />",
-      data(){
-        return {
-          msg: "Hello World!"
-        }
-      }
-    })
-    setTimeout(() => {
-      const currentWidth = parseInt(vm.$els.test.style.width, 10);
-      vm.$set("msg", "Hello");
-      setTimeout(() => {
-        expect( parseInt(vm.$els.test.style.width, 10) ).toBeLessThan(currentWidth);
-        done();
-      }, 0);
-    }, 0);
-  });
-  it("clamps the input's width to the max width option", (done) => {
-    const vm = new Vue({
-      el: document.body,
-      replace: false,
-      template: "<input type='text' :value='msg' v-el:test v-input-autosize />",
-      data(){
-        return {
-          msg: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-        }
-      }
-    });
-    setTimeout(() => {
-      expect( parseInt(vm.$els.test.style.width, 10) ).toEqual(500);
-      done();
-    }, 0);
-  });
-  it("clamps the input's width to the min width option", (done) => {
-    const vm = new Vue({
-      el: document.body,
-      replace: false,
-      template: "<input type='text' :value='msg' v-el:test v-input-autosize />",
-      data(){
-        return {
-          msg: "a"
-        }
-      }
-    });
-    setTimeout(() => {
-      expect( parseInt(vm.$els.test.style.width, 10) ).toEqual(20);
-      done();
-    }, 0);
-  });
-})
diff --git a/test/VueTribute.spec.js b/test/VueTribute.spec.js
new file mode 100644
index 0000000..e1e5d2e
--- /dev/null
+++ b/test/VueTribute.spec.js
@@ -0,0 +1,25 @@
+import Vue from "vue";
+import VueTribute from "../src";
+
+Vue.use(VueTribute);
+
+describe("vue-tribute", () => {
+  it("has an install method for Vue.use()", () => {
+    expect(typeof VueTribute.install).toEqual("function");
+  });
+  it("creates the v-tribute directive", () => {
+    const vm = new Vue({
+      template: "<input type='text' :values='items' v-tribute />",
+      data(){
+        return {
+          items: [
+            {key: "Phil Heartman", value: "pheartman"},
+            {key: "Gordon Ramsey", value: "gramsey"}
+          ]
+        }
+      }
+    }).$mount();
+
+    expect(typeof vm.$options.directives["tribute"]).toEqual("object");
+  });
+})