Vue 图标悬浮动画：左右晃动并下移效果

要实现这样的效果，可以使用 CSS 的动画效果和鼠标悬浮事件。

首先，在你的 Vue 组件中，为图标元素添加一个 CSS 类名，比如 'icon'。

然后，在你的 CSS 文件或样式标签中，添加以下样式：

.icon {
  transition: transform 0.5s ease-in-out;
}

.icon:hover {
  transform: translateX(-10px);
}

这里使用了 CSS 的 'transition' 属性来定义动画效果，'transform' 属性来改变元素的位置。在鼠标悬浮时，将图标向左移动 10 像素。

如果你还想让图标在下边动，可以添加以下样式：

.icon:hover {
  transform: translateX(-10px) translateY(10px);
}

这样，图标在鼠标悬浮时会向左移动 10 像素，并向下移动 10 像素。

记得将上述样式适配到你的具体图标元素上，具体的类名可能会有所不同。