要将Vue应用变成相机，我们需要使用HTML5的媒体API和Vue的数据绑定功能。我们可以让用户点击按钮来拍照并将照片显示在页面上。以下是具体实现过程。

首先，在Vue组件的data选项中定义imageSrc属性来保存拍摄照片的URL：

data() {
return {
imageSrc: ''
}
}

接下来，我们需要在模板中添加一个用于显示相机预览的video元素：

<video id="video" autoplay="true" playsinline="true"></video>

然后，我们需要使用JavaScript从用户的摄像头中获取视频流并将其设置为video元素的src属性：

navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
var video = document.getElementById('video')
video.srcObject = stream
video.play()
}).catch(function (error) {
console.log(error)
})

接下来，我们需要向Vue组件中添加一个按钮，当用户点击该按钮时，我们会从video元素中截取一张图片并将其设置为imageSrc属性的值：

<button @click="takePicture">Take Picture</button>

在Vue组件中添加takePicture方法来截取照片：

takePicture() {
var video = document.getElementById('video')
var canvas = document.createElement('canvas')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
canvas.getContext('2d').drawImage(video, 0, 0)
this.imageSrc = canvas.toDataURL()
}

最后，我们要在模板中添加一个img元素来显示拍摄的照片：

<img :src="imageSrc" v-show="imageSrc">

现在，当用户点击"Take Picture"按钮时，我们会截取一个照片并将其作为imageSrc属性的值。然后，我们会使用Vue的数据绑定功能来将照片显示在页面上的img元素中。